Thursday, October 30, 2014

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

4 comments:

  1. Hello , I have been training students on AngularJS for past 6 months, and at times, I have used your blog as reference for the class training and also for my personal project development. It has been so much useful. Thank you, keep writing more:)
    Shashaa
    AngularJS training institute in Chennai

    ReplyDelete
  2. Worked as a charm, thank you very much Prasanna!!!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Your post is very nice. This blog is help me how to set a page title in the angularjs. Really a very informative blogs Thanks for sharing.keep sharing more blogs.


    Angularjs Online Training

    ReplyDelete