Last month I blogged about a
typical
routing using AngularJS router. AngularJS routing is good and works for
most of the scenarios. In some situations where you need to do nested routing
or some advanced routing, the current implementation fells short. It seems that
the AngularJS 2.0 routing is robust and should cater to all the requirements.
But that’s not going to be out soon. In the meanwhile we have an excellent
routing module called ui-router. There is an excellent article on how to use
this router. I provided the link to this article at the end of my blog.
ui-router supports and caters all the requirements AngularJS
default routing provides. Hence I recommend to use this routing for all your
scenarios. In this blog I will show my simple routing configuration using
ui-router. In my subsequent blogs I will dig deeper into the nested routing and
other ui-router tasks.
Here is my complete code for defining a route (for simplicity
I kept only one route and removed all other routes)
'use
strict';
angular.module('pos').config(routeConfig);
routeConfig.$inject
= ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
function routeConfig($stateProvider, $urlRouterProvider,
$locationProvider) {
$stateProvider
.state("patient", {
url: "/patient/:patientid",
title: "Patient",
templateUrl: "/app/patient/patient.html",
controller: "patient",
controllerAs: "vm",
resolve: ['$stateParams', 'patientService', function ($stateParams,
patientService) {
return patientService.resolve($stateParams.patientid);
}]
$locationProvider.html5Mode(true);
$urlRouterProvider.when('', '/login')
}
As you see in the above code, I defined a state called “patient”
and defined all the parameters for this state. Here are the salient features of
this route definition
This is not the attribute or property of the ui-router. I am
using this to set the window title (which is shown in the browser toolbar).
This is similar to setting the title tag. I will blog about this in my next
blog.
I like the controllerAs feature. It eliminates the need of
using $scope in my code and make my code clean.
resolve: ['$stateParams', 'patientService', function ($stateParams,
patientService) {
return patientService.resolve($stateParams.patientid);
}]
This is one of the important features of my routing. I don’t
want to burden my compiler with fetching the data from server and activities
other than rendering. As these are model or domain specific, I create a service
for each controller to handle these activities. As you know in most scenarios
you need to fetch data from the server before rendering the page, “resolve” is
designed for that activity. Until resolve returns (fetches the data or any
other activity) Angular waits and will not render the page. Resolve option also
helps avoiding the FOUC. Please see
my
blog on this for further details
$locationProvider.html5Mode(true);
I am also using the html5Mode which makes my urls simple. As
you know for older browsers the router automatically fallback to using “#”.
$urlRouterProvider.when('', '/login')
Finally I am using the $urlRouterProvider to specify a
default start view. In this scenario I am redirecting user to the login page.
As you see my routing with ui-router is almost similar to
that of the router provided by angular. With this set, I can start using
advanced routing features.
