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

12 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. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    Regards,
    Angular training in chennai

    ReplyDelete
  3. Hello, you explained clearly about Angular.JS routing. Now hash bang url is deprecated. please refer the below url

    https://developers.google.com/webmasters/ajax-crawling/docs/getting-started?hl=en

    We have developed the SPA in backbone.js with the new concept suggested by Google. Please write an article according to google suggestion in Angular.js

    Angularjs Training in Chennai

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

    ReplyDelete
  5. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The python programming language is very popular and most widely used.
    Python Training in Chennai | Python Course in Chennai

    ReplyDelete
  6. Angularjs Training in Chennai is really helpful to get a bright future. Most of the MNC companies are looking for the fresher’s with good coding knowledge.
    Regards,
    Angularjs course in Chennai | Angularjs Training institute in Chennai

    ReplyDelete
  7. The title attribute description code you described here looks useful. I become one of your regular visitor.
    AngularJS Training Institute in Chennai | Best AngularJS Training in Chennai | AngularJS training and placement

    ReplyDelete
  8. Great explanation with real time live code for AngularJS UI-ROUTER. Here is few more details about the front end framework AngularJS Training In Chennai | AngularJS Training Institute in Chennai

    ReplyDelete
  9. You post explain everything in detail and it was very interesting to read. Thank you.AngularJS Training in Chennai

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

    ReplyDelete
  11. 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