Page Titles Dynamically Using AngularJS – ng-page-title Example
AngularJS is used to bind directive to build (SPA)single page WebApps.
change the Dynamically title tag to include simple a ng-bind function:
“$routeChangeSuccess” event dynamically get to set a your route pageTitle scope.
“Page Titles Dynamically Using AngularJS – ng-page-title Example”
simple code
[php]
———
myApp.run([‘$location’, ‘$rootScope’, function($location, $rootScope) {
$rootScope.$on(‘$routeChangeSuccess’, function (event, current, previous) {
if (current.hasOwnProperty(‘$$route’)) {
$rootScope.title = current.$$route.title;
}
});
}]);
[/php]
How to set Dynamically page title with Angular
index.html
[php]
[/php]
app.js
[php]
var infinityApp = angular.module(‘infinityApp’, [‘ngResource’])
infinityApp.config([‘$routeProvider’,
function($routeProvider) {
$routeProvider.
when(‘/’, {
title: ‘Home-s’,
templateUrl: ‘home.html’,
controller: ‘homeCtrl’
})
.when(‘/liveweb-s’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-s.html’,
controller: ‘firstCtrl’
}).when(‘/liveweb-s-correct’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-s-correct.html’,
controller: ‘secondCtrl’
}).when(‘/liveweb-a’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-a.html’,
controller: ‘secondCtrl’
}).when(‘/liveweb-a-correct’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-a-correct.html’,
controller: ‘thirdCtrl’
}).when(‘/liveweb-f’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-f.html’,
controller: ‘thirdCtrl’
}).when(‘/liveweb-f-correct’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-f-correct.html’,
controller: ‘fourthCtrl’
}).when(‘/liveweb-e’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-e.html’,
controller: ‘fourthCtrl’
}).when(‘/liveweb-e-correct’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-e-correct.html’,
controller: ‘safeCtrl’
}).when(‘/safe’, {
title: ‘liveweb-s’,
templateUrl: ‘safe.html’,
controller: ‘safeCtrl’
}).when(‘/mydue’, {
title: ‘liveweb-s’,
templateUrl: ‘mydue.html’,
controller: ‘mydueCtrl’
})
.otherwise({
redirectTo: ‘/’
});
}]);
infinityApp.run([‘$rootScope’, function($rootScope) {
$rootScope.$on(‘$routeChangeSuccess’, function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
[/php]
Change Page Titles Dynamically Using AngularJS Example
[php]
infinityApp.config([‘$routeProvider’,
function($routeProvider) {
$routeProvider.
when(‘/’, {
title: ‘Home-s’,
templateUrl: ‘home.html’,
controller: ‘homeCtrl’
})
.when(‘/liveweb-s’, {
title: ‘liveweb-s’,
templateUrl: ‘liveweb-s.html’,
controller: ‘firstCtrl’
})
.otherwise({
redirectTo: ‘/’
});
}]);
**********
app.controller(‘liveCtrl’, [‘$scope’, function ($scope) {
$scope.$on(‘$routeChangeSuccess’, function (event, data) {
$scope.pageTitle = data.title;
});
} ]);
**********
[/php]
Change Page Title in Angular Route using factory Example
[php]
var liveapp = angular.module(‘infinityApp’, []);
liveapp.config([‘$routeProvider’, ‘$locationProvider’, function($routeProvider, $locationProvider) {
$routeProvider.
when(‘/home’, {template: ‘page 1’, controller: live1Ctrl}).
when(‘/mypage’, {template: ‘page 2’, controller: live2Ctrl}).
otherwise({redirectTo: ‘home’});
$locationProvider.html5Mode( true );
}]);
liveapp.factory(‘Page’, function(){
var title = ‘infinityApp’;
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle; }
};
});
function MainCtrl($scope, Page) {
$scope.Page = Page;
}
function live1Ctrl($scope, Page) {
Page.setTitle(‘Angularjs Home Page’);
}
function live2Ctrl($scope, Page) {
Page.setTitle(‘infinityknow.com’);
}
[/php]