Typical AngularJS routing using ui-router

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

            title: "Patient",

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.

            controllerAs: "vm",

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.

Here is a detailed blog on the using Angular ui-router Diving deep into the AngularUI Router