0

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

Community
  • 1
  • 1
Lijin Durairaj
  • 653
  • 1
  • 6
  • 9

2 Answers2

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.

SinDeus
  • 516
  • 1
  • 6
  • 21
  • please see my update, i have resolved the error on the home page but my other page gets the error – Lijin Durairaj Jan 09 '17 at 08:58
  • 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. – SinDeus Jan 09 '17 at 09:28
  • why shoudl i change the question when the isssue is not resolved, i just changed the angular version file – Lijin Durairaj Jan 09 '17 at 09:45
  • @LijinDurairaj: have this fixed your issue? If so, don't forget to accept the answer. Thanks. – SinDeus Jan 10 '17 at 09:55
0

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

Laazo
  • 467
  • 8
  • 22