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).
This one looks good. I was wondering how do we do it when a $StateProvider and states are used?
ReplyDeleteYou can use the same concept with $StateProvider as I used in my other project.
ReplyDelete$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;
}