Routing not working on Angularjs

Question

Trying to work out a simple example for the angular routing but its not working. home,courses and students links are not working

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href="#/home">Home</a> 
                    <a href="#/courses">Courses</a> 
                    <a href="#/students">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

script2.js

var app = angular.module("Demo", ["ngRoute"]) 
        .config(function ($routeProvider,$locationProvider) { 
             $locationProvider.html5Mode(true);
            $routeProvider 
                .when("/home", {
                     templateUrl: "Templates/home.html", 
                     controller: "homeController" }) 
                .when("/courses", { 
                    templateUrl: "Templates/courses.html", 
                    controller: "coursesController" }) 
                .when("/students", { 
                    templateUrl: "Templates/students.html", 
                    controller: "studentsController" }) }) 
        .controller("homeController", function ($scope) { 
            $scope.message = "Home Page"; }) 
        .controller("coursesController", function ($scope) { 
            $scope.message = "Courses Page"; }) 
        .controller("studentsController", function ($scope) { 
            $scope.message = "Students Page"; 
    })

home.html

<h1>{{ message }}</h1> 
<h3>What is Lorem Ipsum?</h3>
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Any help on this would be much appreciated

It has problem with ` <td class="leftMenu"> <a href="#/home">Home</a> <a href="#/courses">Courses</a> <a href="#/students">Students</a> </td> ` You should try <a> tag like ` <a href="#red">Red</a> <a href="#green">Green</a> <a href="#blue">Blue</a>` — Bhoomi Bhalani
– Bhoomi Bhalani, Commented May 23, 2017 at 6:32
Thanks @bhoomikhanapara i changed code as per your suggestion but not working. — Sunny Khatri
– Sunny Khatri, Commented May 23, 2017 at 6:35

rrd · Accepted Answer · 2017-05-23 06:37:23Z

2

Try changing your routing:

<a href="#!/home">Home</a> 
<a href="#!/courses">Courses</a> 
<a href="#!/students">Students</a>

The routing changed in version 1.6.0 (?) and so you have to use hash-bang notation now. You could change it from this by adding this code around where you have your html5Mode:

  $locationProvider.hashPrefix('');

answered May 23, 2017 at 6:37

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

2 Comments

kapishreshth Over a year ago

I do not understand the symbol '!' in Anchor's href="" attribute.

rrd Over a year ago

Take a look at this url: stackoverflow.com/questions/41286031/… it goes over it

Prateek Gupta · Accepted Answer · 2017-05-23 06:45:17Z

Try this way: Firstly remove # from href.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href ng-click="redirectToHome()">Home</a> 
                    <a href ng-click="redirectToCourse()">Courses</a> 
                    <a href ng-click="redirectToStudent()">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

And JS Code:

  var app = angular.module("Demo", ["ngRoute"]) 
                .config(function ($routeProvider,$locationProvider) { 
                     $locationProvider.html5Mode(true);
                    $routeProvider 
                        .when("/home", {
                             templateUrl: "Templates/home.html", 
                             controller: "homeController" }) 
                        .when("/courses", { 
                            templateUrl: "Templates/courses.html", 
                            controller: "coursesController" }) 
                        .when("/students", { 
                            templateUrl: "Templates/students.html", 
                            controller: "studentsController" }) })
                .run(function($rootScope,$location){
    $rootScope.redirectToHome=function(){
    $location.path('\home');
    }
    $rootScope.redirectToCourse=function(){
    $location.path('\courses');
    }
    $rootScope.redirectToStudent=function(){
    $location.path('\students');
    }
                    })
                .controller("homeController", function ($scope) { 
                    $scope.message = "Home Page"; }) 
                .controller("coursesController", function ($scope) { 
                    $scope.message = "Courses Page"; }) 
                .controller("studentsController", function ($scope) { 
                    $scope.message = "Students Page"; 
            })

Collectives™ on Stack Overflow

Routing not working on Angularjs

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related