Routing not working Angular js

Question

I was working with routing in angularjs

My aim here is to use routing to route pages to the index.html page.

When I click the home and courses anchor tag I expect to include the contents of the respected files home.html and courses.html to load in ng-view which is showing blank when I click.

There is also no error in the console which makes me hard to understand.

I am a beginner in angularjs.

Please comment for any query.

Below is the code for index.html

<!DOCTYPE html>
<html>
<head>
    </style>
</head> 
<body ng-app="myModule">
    <div>
        <h1>Indexpage</h1>
        <ul>
            <li>
                <a href="#/home">Home</a>
            </li>
            <li>
                <a href="#/courses">Courses</a>
            </li>
        </ul>
    </div>
    <div>
        <ng-view></ng-view>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="custom.js"></script>
</body>
</html>

Below is the code for home.html

<h1>
    {{ message }}
</h1>
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Below id the code for courses.html

<h1>
    {{ message }}
</h1>
<div>
    <ul>
        <li ng-repeat="course in courses">
            {{ course }}
        </li>
    </ul>
</div>

Below is the code for custom.js

var myApp = angular.module("myModule",["ngRoute"])
                   .config(function($routeProvider){
                       $routeProvider
                           .when("/home",{
                                templateURL : "Templates/home.html",
                                controller : "homeController"                         
                            })
                           .when("/courses",{
                                templateURL : "Templates/courses.html",
                                controller : "courseController"
                            });
                   })
                   .controller("homeController",function($scope){
                        $scope.message = "Home";
                   })
                   .controller("courseController",function($scope){
                        $scope.message = "Courses";
                        $scope.courses = ["PHP","JAVA","mysql","Oracle","javascript"];
                   }));

First, don't use angularjs 1.6.4 with angular-route 1.6.9. The two version numbers must be equal. Second, don't use minified versions while in development. Third: what is your question/problem? What are you doing? What do you expect to happen? What happens instead? — JB Nizet
– JB Nizet, Commented Feb 25, 2018 at 12:31
I changed the version of angular route from 1.6.9 to 1.6.4 but with no effect — R K
– R K, Commented Feb 25, 2018 at 12:39
I tried it , it throws me to root directry -> localhost/courses — R K
– R K, Commented Feb 25, 2018 at 12:53

JB Nizet · Accepted Answer · 2018-02-25 12:57:43Z

I made a plnkr, which made several things obvious:

you have invalid HTML in your index.html page: </style>
your JS code is invalid too: it has two closing parentheses instead of one
after fixing that, the page displays fine, but clicking on the link doesn't load the home or courses view as it should: the page stays unmodified.

There are two reasons, as shown in the plnkr:

The URLs of the links should be #!/home and #!/courses, not #/home and #/courses (see the documentation)
The proper property for the template URL in the router configuration is templateUrl, not templateURL (see the documentation).

Collectives™ on Stack Overflow

Routing not working Angular js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related