AngularJS UI-Router and Page title

In my previous blog, I wrote about on how to set Page title when using AngularJS routing. In this blog I will write about on how to do the same when we are using ui-router. If you haven’t read my previous blog, here is my requirement: when the user navigates from one page to another using angular routing mechanism, I want to set the page title and I would like to set this in an unobtrusive manner.

The approach and the code is almost similar in setting the page title using either with angularjs router or ui-router. But there is a minor difference due to the syntactical differences between these two routers.

Here is the code for defining the title attribute in the router

    $stateProvider

        .state("dashboard", {

            url: "/",

            title: "Dashboard",

            templateUrl: "/app/dashboard/dashboard.html",

            controller: "dashboard",

            controllerAs: "vm",

            resolve: ['dashboardService', function (dashboardService) {

                return dashboardService.resolve();

            }]

        })

        .state("login", {

            url: "/login",

            title: "Login",

            templateUrl: "/app/account/login.html",

            controller: "login",

            controllerAs: "vm",

        })

        .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);

            }]

        })

Once the route is defined with the title attribute, I can set the window title on the state change event

        $rootScope.$on('$stateChangeSuccess', function (evt, toState, toParams, fromState, fromParams) {

            $window.document.title = toState.title;

        });

As you see we can unobtrusively set the page title by using either routers