The Coding Tips: AngularJS Routing

Thursday, August 13, 2015

AngularJS Routing

Dividing it in Views and using Routing to load different part of app helps in logically dividing the app and making it more manageable.
Routing helps you in dividing your application in logical views and bind different views to Controllers.

$routeProvider
The $routeProvider (provider in ngRoute Module) is used to configure the routes. We use the module’s config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function.

ng-view
The ngView directive is used to display the HTML templates or views in the specified routes. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Routing Syntax

var app = angular.module("simpleApp", ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'FirstController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/home'
});

});

Simple Example AngularJS routing:
Now we are create simple application and using angularjs and angularjs rouint file.

index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Routing</title>
<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="main.js"></script>
</head>
<body>

<div ng-app="mainApp">
<ng-view></ng-view>
</div>

</body>

</html>

home.html

<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>

</div>

viewStudents.html

<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>

<a href="#/home"> Back</a>
</div>

main.js

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/home'
});
});

mainApp.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Mark Waugh', city:'New York'},
{name: 'Steve Jonathan', city:'London'},
{name: 'John Marcus', city:'Paris'}
];

$scope.message = "Click on the hyper link to view the students list.";
});