In this blog post we look at how to use the angularjs ui router library. This is not the $routeProvider service which comes with angularjs but rather an external and more powerful library for routing.
What is Routing
We need to first see what is routing and why it is required for any angularjs application. Routing means based on different URL’s which we open in our browser, we are able to show different pages/views to the user. This is quite easy in a multi page application, since we can specify a different html/php file for a URL. Most angularjs applications are single page applications, this poses a problem to show different content based on different URL.
To solve this, we need special library which efficiently manages how to display different content based on URL.
Routing in AngularJS
Angularjs comes with a route library (angular-router.js), which has a $routeProvider service. Lets look briefly how it work. I am not going into details of the service, since the focus of this blog is angular ui router.
[code]
phonecatApp.config([‘$routeProvider’,
function($routeProvider) {
$routeProvider.
when('/phones’, {
templateUrl: ‘partials/phone-list.html’,
controller: ‘PhoneListCtrl’
}).
when('/phones/:phoneId’, {
templateUrl: ‘partials/phone-detail.html’,
controller: ‘PhoneDetailCtrl’
}).
otherwise({
redirectTo: ‘/phones’
});
}]);
[/code]
This has 2 functions, when() and otherwise(). when() matches a URL and shows the template/controller according to it, otherwise() get execute when no url gets matched.
So as we can see angularjs provides a very basic routing mechanism, which lacks many things. Lets see what all important things angularjs $routeProvider lacks.
Why Angular UI Router is needed
As we saw above, $routeProvide only provides a very basic structure for routing. The important things which it lacks are as below
- We are not able to divide our main templates into further sub templates and provide a proper structure. Suppose we have a large page, instead of putting code into a single html we wish to divide the code further in sub template files. This helps to better organize code logically, but this is not possible with $routeProvider
- Ability to require common file. Suppose we have a common left menu or header, which we need to show on all pages. It’s not possible to have a common file and include it on all pages through $routeProvider
Angular UI Router
Lets now look into how angular ui router works. This is one of the most used routing libraries in angularjs, it’s based on “states” rather then URL’s and helps us to solve the above two problem discussed.
You can go through the basic documentation here https://github.com/angular-ui/ui-router and https://github.com/angular-ui/ui-router/wiki
There are many things which you can do in angular ui-router which you can see in their documentation, we will discuss here how we are able to solve the above two problems with angular ui router.
Multiple Parallel Views with Angular UI Router
This is regarding our first problem we faced i.e splitting up a large page into multiple sub views.
This is explained here in https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Nested Views and Abstract Views
The second problem we had of nesting views and have a common template file.
For nesting of view refer to this link https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
For having a common template file across different pages, we need to use abstract states. You can read more about it here https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states
Angular UI Router Events
There are many events which angular ui router fires internally during transition of states. These are quite useful for various purposes, more about them can be read here https://github.com/angular-ui/ui-router/wiki#state-change-events
As we see above, angular ui router provide us with basic angular routing features plus on top of that solve the fundamental issues with angular router has.
