Not able to load template using ng-view in angularJs

Question

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

@AvneshShakya i could embed the image, but there was a link were you been able to see the image of the error — Lijin Durairaj
– Lijin Durairaj, Commented Jan 9, 2017 at 8:41

SinDeus · Accepted Answer · 2017-01-09 13:57:50Z

1

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.

edited Jan 9, 2017 at 13:57

answered Jan 9, 2017 at 8:47

SinDeus

5151 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lijin Durairaj Over a year ago

please see my update, i have resolved the error on the home page but my other page gets the error

SinDeus Over a year ago

This is an entirely new question, I think you better ask it on another thread. Also, please refrain from updating your question after seeing the answers: keep it the way it was, it may help others as well. I suggest you revert back your question to the original issue, and then create another for your new problem.

Lijin Durairaj Over a year ago

why shoudl i change the question when the isssue is not resolved, i just changed the angular version file

SinDeus Over a year ago

@LijinDurairaj: have this fixed your issue? If so, don't forget to accept the answer. Thanks.

Laazo · Accepted Answer · 2017-01-09 08:31:54Z

0

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

answered Jan 9, 2017 at 8:31

Laazo

4699 silver badges23 bronze badges

2 Comments

Lijin Durairaj Over a year ago

well i have just included the file and styill it is not working

Laazo Over a year ago

try the uncompressed version;ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js

Collectives™ on Stack Overflow

Not able to load template using ng-view in angularJs

2 Answers 2

Update

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related