AngularJS : routes and navigation

This entry was posted by on Vendredi, 19 octobre, 2012 at

Principle already well known in web frameworks of all types, the notion of routing allows you to associate a URL to a resource (dynamic or static web page). On the same way AngularJS offers a building URL to point to a specific location in application: the “deep-linking”. ng-view directive can load views, each view is associated to an URL. First page becomes the main template and load, via the ng-view directive, the view corresponding to the URL.

routes declaration

routes declaration is made by $routeProvider service and $route service using the config() method of themodule:

Two roads are reported here, each pointing to a view: one to display a list of friends (/list), another to edit / create a friend (/edit).

It is not yet possible to define several ng-view directives in the same page, but debate is open. Meanwhile ng-include directive overcome this deficiency and may be declared several times in the same page, but you have to manage yourself the behavior.

$location service

URL construction is consistent with the HTML5 History API recommendation via $location object. Via this object the idea is to have a unique code that can be adapted depending on whether the target is an incompatible browsers or not. HTML5 mode is not enabled by default, the html5Mode(true) method of $locationProvider service is used to configure it. For more information on two available modes, follow the guide.
In the example above, $location is used to redirect the user to friends list after clicking “save” (see controllers.js)

Settings

Parameters can also be added to URLs. So in the above example, the “edit” link refers to the array index as a parameter in the URL.

and the road is declared as:

The $routeParams service will then be added to provide access to URL parameters .
Either the http://server.com/index.html#/Chapter/1/Section/2?search=moby URL
and /Chapter/:chapterId/Section/:sectionId route
$routeParams return {chapterId:1, sectionId:2, search:’moby’}
In our example $routeParams is injected into the controller FriendEditCtrl

Initialization and delay before displaying a page

The method for configuring a route $routeProvider.when(path, path) describes the route as a path (eg: /edit) which is associated to a controller and a template. A route can also be redirect to another URL (redirectTo). But it is also possible to define actions to be performed before loading the page via the parameter resolve. So if a page needs to load a large list of data, the system allows the user to wait before displaying the page. The example below is the same as the previous one, except that the friends table take 2s to be retrieved.
To simulate this in this example I use the $q service: an implementation of promise/deferred model inspired by the Kris Kowal’s Q project combined with the $timeout service to initiate resolution of the deferred object 2s later.
The specific feature of the resolve parameter is to have a map parameter where each key is considered as a reference to a service that can be injected into the controller and the value contains the corresponding service. If the value returns a “promise” then it is resolved before the controller is instantiated and emits the $routeChangeSuccess event after the resolution of the deffered object.
=> Press the play button to see the behavior: a message “Loading friends …” appears for 2 seconds and then the friends list is displayed

Event

Note in this example the use of $routeChangeStart and $routeChangeSuccess events with the butterBar directive.

Events allow to interact in the views display cycle and here show a message until the page is displayed.

Comments are closed.