Not able to load template using ng-view in angularJs

Question

Not able to load template using ng-view in angularJs

1.2k Views Asked by Lijin Durairaj At 15 May 2025 at 21:32

I am trying to build a basic SPA using angularJS, the problem is I am not able to load the template using angularJS, the following is my code

customAngular.js

var app = angular.module("appModule", ["ngRoute"]);

  app.config([function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "pages/main.html"
    })
    .when("/red", {
        templateUrl: "pages/about.html"
    })
    .when("/green", {
        templateUrl: "pages/blog.html"
    }).otherwise({ redirectTo: '/' })
}]);

HTML PAGE

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/styles/bootstrap.min.css" rel="stylesheet" />
    <link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/angularJS/angular.min.js"></script>
    <script src="~/angularJS/customAngular.js"></script>
</head>
<body ng-app="appModule">
    <a href="/">main</a>
    <a href="/green">Green</a>
    <a href="/red">red</a>
    <div ng-view></div>
    
</body>
</html>

Can anyone help me to understand the error

UPDATE 1

has bneen modified

UPDATE 2

i have updated the page as per the request, i have changed the angular in to unminified version 1.6

  <script src="~/angularJS/angular.v1.6.1.js"></script>
    <script src="~/angularJS/angular-route.js"></script>
    <script src="~/angularJS/customAngular.js"></script>

and changed my customAngular.js file like this

var app = angular.module("appModule", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "pages/main.html"
    })
    .when("/red", {
        templateUrl: "pages/about.html"
    })
    .when("/green", {
        templateUrl: "pages/blog.html"
    }).otherwise({ redirectTo: '/' })
}]);

now i am able to see the index page like this index page but when i move my page to /red, i get an error like this error page on redirection

Original Q&A

There are 2 best solutions below

Laazo On 09 January 2017 at 08:31

You are missing <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

**SinDeus** · Accepted Answer

You have injected your $routeProvider the wrong way:

app.config([function ($routeProvider) {
    /* $routeProvider will be undefined */
    ...
}]);

Thing is, you mixed two ways of Angular injection:

app.config(function ($routeProvider) {
    ...
});

And

app.config(['$routeProvider', function ($routeProvider) {
    ...
}]);

You put [] around your function, so Angular expected to see some component identifiers as strings in the head of the array. So, simply remove the square brackets or add the component identifier, as shown in the two examples above.

Update

You still see an error because, as @Gayathri pointed out in the comments, you are trying to access the URI /red on your server... which doesn't exist. You links should be like:

<a href="#">main</a>
<a href="#green">Green</a>
<a href="#red">red</a>

See this codepen.

Not able to load template using ng-view in angularJs

There are 2 best solutions below

Update

Related Questions in ANGULARJS

Related Questions in NGROUTE

Related Questions in ANGULARJS-1.6

Trending Questions

Popular # Hahtags

Popular Questions