Search This Blog

2016-01-11

Angular JS Tutorial5: ngroute

The ngRoute module provides routing for angular apps.

We can download angular-route.js from the below location
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
where x.y.z indicates the version on angular-route.js like 1.3.5

Example :

5.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>ngRoute</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="angular-route.js"></script>
 <script src="5controller.js"></script>
</head>
<body  ng-app="myapp">
 <div ng-view></div>
</body>
</html>

5controller.js :

var app=angular.module('myapp',['ngRoute']);
app.config(function($routeProvider){
 $routeProvider
 .when('/',{
  templateUrl:'5a.html',
  //template:'Loaded from /'
 })
 .when('/fiveb',{
  templateUrl:'5b.html'
 })
 .when('/fivec',{
  templateUrl:'5c.html'
 })
 .otherwise({
  redirectTo:'/'
 });
});

5a.html:
I am in 5a<a href="#/fiveb">Open fiveb</a>

5b.html:
I am in 5b

5c.html:

<a href="#/fiveb">Open fiveb</a>I am in 5c



No comments: