Sunny Khatri Sunny Khatri - 1 year ago 40
Javascript Question

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

rrd rrd
Answer Source

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('');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download