Thursday, October 30, 2014

AngularJS Routing and Page title

I came across a scenario where I would like to set the page title for each route in my angularjs app. For example if the user is in the dashboard, I want to set the page title as dashboard and when the user navigates to the patient page, I would like to set the page title as Patient. Obviously I would like to set this in an unobtrusive way.

In order to accomplish this first I defined a custom attribute called “title” in the angularjs routing as shown below:

    $routeProvider
        .when("/", {
            title: "Dashboard",
            templateUrl: "/app/dashboard/dashboard.html",
            controller: "dashboard",
            controllerAs: "vm",
        })
        .when("/login", {
            title: "Login",
            templateUrl: "/app/account/login.html",
            controller: "login",
            controllerAs: "vm",
        })
        .when("/patient/:patientid", {
            title: "Patients",
            templateUrl: "/app/patient/patient.html",
            controller: "patient",
            controllerAs: "vm",
            resolve: ['patientService', function (patientService) {
                return patientService.resolve();
            }]
        })

For each of the routes defined in my routing, I added a title attribute that will be set as a page title. After defining the title, I am setting this title on the route change event of the angularjs routing as shown below

        $rootScope.$on('$routeChangeSuccess', function () {
            $window.document.title = $route.current.title;
        });

With this approach I was able to set the title of each page at a module level (not going inside each page).

2 comments:

  1. This one looks good. I was wondering how do we do it when a $StateProvider and states are used?

    ReplyDelete
  2. You can use the same concept with $StateProvider as I used in my other project.

    $stateProvider
    .state("colour", {
    url: window.virtualDirectory + "/colour",
    title: "Product Colour",
    previousState: "dashboard",
    templateUrl: "/app/quarry/materialColour.html",
    controller: "materialColour",
    controllerAs: "vm",
    resolve: {
    resolveModel: ['quarryService', function (quarryService) {
    return quarryService.getMaterialColours();
    }]
    }
    })
    .state("producttype", {
    url: window.virtualDirectory + "/producttype",
    title: "Product Type",
    previousState: "dashboard",
    templateUrl: "/app/quarry/productType.html",
    controller: "productType",
    controllerAs: "vm",
    resolve: {
    resolveModel: ['quarryService', function (quarryService) {
    return quarryService.getProductTypes();
    }]
    }
    })

    After that in the state change event we can set the page title
    $rootScope.$on('$stateChangeStart', function (evt, toState, toParams, fromState, fromParams) {
    $window.document.title = toState.title;
    }

    ReplyDelete