Angular Change Page Title Dynamically
Today, We want to share with you Angular Change Page Title Dynamically.
In this post we will show you Change Page Title Dynamically Using Angular JS, hear for Dynamic page titles in Angular 2 with router events we will give you demo and example for implement.
In this post, we will learn about Change Page Titles Dynamically Using AngularJS with an example.
Change Page Title in Angular Route
AngularJS is used to build (SPA)single page WebApps.
angular Route changes url from a server side to always have all the page title(title name) set automatically(dynemically) in the html in head with title tag.
Allows to control the page title from the AngularJS route system, Angular controllers or any other component(modules) through an injectable service in angular.
We will consider (title tag) how to change title
1st) angular using a resolve with function in our the $state to tell the page title
2nd) angular using $rootScope.$on(…) function within our module .run
3rd) by updating the page title in our controller in angularjs, Best for dynamic The page titles, like website or blog posts etc.
AngularJS : Dynamically Set Page Title
[php]
var dataApp = angular.module(‘dataApp’, [‘ngResource’]);
//angularjs config script
dataApp.config([‘$routeProvider’, function($routeProvider) {//all pages are route
$routeProvider.when(‘/’, {
title: ‘Contactus’,
templateUrl: ‘/partial/Contactus.html’,
controller: ‘ContactusController’
});
$routeProvider.when(‘/Salesorder/:id’, {
title: ‘Salesorder’,
templateUrl: ‘/partial/Salesorder.html’,
controller: ‘SalesorderController’
});
}]);
dataApp.run([‘$location’, ‘$rootScope’, function($location, $rootScope) {
$rootScope.$on(‘$routeChangeSuccess’, function (event, cata, previous) {
$rootScope.title = cdata.$$route.title;
});
}]);
[/php]
Full code : Change title based on Route with AngularJS
[php]
http://yourprojectname/1.7.1/jquery.min.js
http://yourprojectname/jquery-ui.min.js
http://yourprojectname/js/bootstrap.js
http://yourprojectname/angular.js
http://yourprojectname/app.js
{{ Page.title() }}
[/php]
app.js
[php]
var titlapp = angular.module(‘titleApp’, []);
titlapp.config([‘$routeProvider’, ‘$locationProvider’, function($routeProvider, $locationProvider) {
$routeProvider.
when(‘/technologies’, {template: ‘page 1’, controller: technologiesCtrl}).
when(‘/contactus’, {template: ‘page 2’, controller: contactusCtrl}).
otherwise({redirectTo: ‘technologies’});
$locationProvider.html5Mode( true );
}]);
titlapp.factory(‘Page’, function(){
//set default page title
var title = ‘default’;//set default
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle; }
};
});
function dataMainCtrl($scope, Page) {
$scope.Page = Page;
}
function technologiesCtrl($scope, Page) {
Page.setTitle(‘technologies’);
}
function contactusCtrl($scope, Page) {
Page.setTitle(‘contactus’);
}
[/php]
