World Of Information Technology: AngularJS : Change Title of Page According to Route

AngularJS is used to build single page web applications. So even if you change route i.e. route from one template to another, you would see the same title for all templates on the Browser.

In normal condition, route changes from a server, so page title set automatically to the title of head tag. Client-side routing doesn’t have that automatic mechanism.

Here is one of the simple way to change title of template on route.

Suppose, home.html and contact.html are two template files in template folder and index.html in root folder.

template/home.html
<div> <h1> This is Home Page </h1> </div> template/contact.html <div> <h1> This is Contact Page </h1> </div> index.html <html> <head> <title ng-bind="'ShivajiSoft - ' + $root.title">ShivajiSoft - Welcome</title> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script> var moduleDemoApp = angular.module('demoApp', ['ngRoute']); moduleDemoApp.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', { templateUrl: 'template/home.html', title: 'Home' }). when('/contact', { templateUrl: 'template/contact.html', title: 'Contact Us' }). otherwise({ redirectTo: '/home' }); } ]); moduleDemoApp.run(['$rootScope', function ($rootScope) { $rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) { $rootScope.title = currentRoute.title; }); } ]); </script> </head> <body> <a href="#/home">Home</a> <a href="#/contact">Contact</a> </body> </html>

Here in this example, we used ngBind instead of {{ expression }} for binding title when a template is momentarily displayed by the browser in its raw state before Angular compiles it.

Conclusion :

I hope that this article would have helped you in understanding to change title of page according to route in AngularJS Please share your knowledge if you know more about this attribute. Your feedback and constructive contributions are always welcome.

World Of Information Technology

AngularJS : Change Title of Page According to Route

No comments:

Post a Comment