CODEWITHSUNDEEP
angularjsangular-routing
R K
R K

Reputation: 327

Routing not working Angular js

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"];
                   }));

Upvotes: 1

Views: 293

Answers (1)

JB Nizet
JB Nizet

Reputation: 692211

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:

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

Upvotes: 3

Related Questions