AngularJS Change Dynamically Title Element Based on Routing
In this Post We Will Explain About is AngularJS Change Dynamically Title Element Based on Routing With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS: Change Page Title Based on Routers DynamicallyExample
In this post we will show you Best way to implement How to dynamically change header based on AngularJS, hear for How to dynamically set title tag on page load in AngularJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Example 1 : AngularJS: Change Page Title Based on Routers Dynamically
app.js file
[php]
app.config([‘$routeProvider’, function ($routeProvider) {
$routeProvider.
when(‘/home’, {
templateUrl: ‘/partials/home.html’,
controller: ‘HomeCtrl’,
title: ‘custom_page One’
}).
when(‘/aboutus’, {
templateUrl: ‘/partials/about-us.html’,
controller: ‘AboutusCtrl’,
title: ‘custom_page Two’
}).
otherwise({
redirectTo: ‘/home’
});
} ]);
[/php]
$routeChangeSuccess supports event to set a live_page_title scope
[php]
app.controller(‘liveCtrl’, [‘$scope’, function ($scope) {
$scope.$on(‘$routeChangeSuccess’, function (event, data) {
$scope.live_page_title = data.title;
});
} ]);
[/php]
ng-Controller to the simple head part and use the live_page_title
[php]
[/php]
Example 2 : AngularJS : Change title based on Route Example
service:
[php]
app.factory(‘custom_page’, function () {
var title = ‘default’;
return {
title: function () { return title; },
setTitle: function (newTitle) { title = newTitle; }
};
});
[/php]
liveCtrl
[php]
app.controller(‘liveCtrl’, [‘$scope’, ‘custom_page’, function ($scope, custom_page) {
$scope.custom_page = custom_page;
}]);
[/php]
live_page_title in our HomeCtrl:
[php]
mainModule.controller(‘HomeCtrl’, [‘$scope’, ‘custom_page’, function ($scope, custom_page) {
custom_page.setTitle(‘custom_page One’);
}]);
[/php]
a call simple our angularjs service from our VIEW html:
[php]
[/php]
I hope you have Got What is AngularJS : Change title based on Route Example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.