AngularJS Change Dynamically Title Element Based on Routing

Rate this post

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!.

READ :  Angularjs Custom Animation nganimate Examples

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]

{{live_page_title}} | infinityknow.com App
[/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]

READ :  Angular location redirect with parameters

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]

{{ custom_page.title() }} | infinityknow.com App
[/php]

Example

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.

Leave a Reply

Your email address will not be published.