In this tutorial we will go through few more important features in AngularJs called Routing and Views. Once we develop the application with more features it will grow and tough to manage all the templates of views and hard to manage. So it will be good if we divide the whole application into multiple views and load them using routingmakes application more logical and easily manageable.
Routing helps you in dividing your application into different views and bind them to the controllers.
Let’s see the above example it tells us there are two routes, each one pointing to different view and binding to their respective controller. let’s routing and views in more detail.
Introduction to $routeProvider
The magic of Routing is taken care by a service provider that Angular provides called $routingProvider. This service providers are set of functions, when these instantiated the will contain a property called $get, which holds of the service factory function.
When we use AngularJs dependency injection and inject a service object in our Controller, Angular uses $injector to find corresponding service injector. Once it get a hold on service injector, it uses $get method of it to get an instance of service object. Sometime the service provider needs certain info in order to instantiate service object.
Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature we can implement deep linking, which lets us utilize the browser’s history and bookmarks.
Syntax to add Routing
Let’s see how we can add routing and views to an angular application.
var phonecatApp= angular.module('phonecatApp', []);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'templates/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'templates/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
We defined an angular app called “phonecatApp” using angular module method. Once we have our app, we can use config() method to configure $routeProvider. $routeProvider provides method when() and otherwise() which we can use to define the routing for our app. We defined two urls /phones and /phone/:phoneId and mapped them with the respective views templates/phone-list.html and templates/phone-detail.html. When we open the urls they will invoke respective controllers.
Hello World using Routing
Let’s go through an example in Angularjs and use routing to load different templates at runtime.
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
The $route service is usually used in conjunction with the ngView directive. The role of the ngView directive is to include the view template for the current route into the layout template.
Let’s define controllers in js/app.js file like below to bind our view templates.
phonecatApp.controller('PhoneListCtrl', function($scope) {
$scope.message = 'This is Phones List Screen';
});
phonecatApp.controller('PhoneDetailCtrl', function($scope) {
$scope.message = 'This is Phone Detail Screen';
});
Now we have to add HTML template files let’s see phone-list.html view.
templates/phone-list.html
<h2>Phones List View</h2>
{{ message }}
Let’s see phone-detail.html view
templates/phone-detail.html
<h2>Phones Detail view</h2>
{{ message }}
In the above example we saw dynamic URL’s also by passing a parameter through routing like below.
when('/phones/:phoneId', {
templateUrl: 'templates/phone-detail.html',
controller: 'PhoneDetailCtrl'
})
and we can read the parameter in controller function like below.
$scope.phone_id = $routeParams.phoneId;
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
This is the way you have to build your routing and also link with different views by binding them to controllers. For more examples please look at AngularJs Developer tutorial.
