CODEWITHSUNDEEP
javascriptangularjs
Sunny Khatri
Sunny Khatri

Reputation: 535

Routing not working on Angularjs

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

Upvotes: 0

Views: 58

Answers (2)

Prateek Gupta
Prateek Gupta

Reputation: 1169

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

Upvotes: 1

rrd
rrd

Reputation: 5977

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('');

Upvotes: 2

Related Questions