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
<title ng-bind="title +' - MyAPP Home'"> - MyApp</title>
---------
myApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
if (current.hasOwnProperty('$$route')) {
$rootScope.title = current.$$route.title;
}
});
}]);
How to set Dynamically page title with Angular
index.html
<!DOCTYPE html>
<html ng-app="infinityApp">
<head>
<title ng-bind="'infinityApp — ' + title">infinityApp</title>
</head>
<body>
<div data-ng-view></div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
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;
});
}]);
Change Page Titles Dynamically Using AngularJS Example
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;
});
} ]);
**********
<html ng-controller="liveCtrl">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{pageTitle}} | infinityknow.com</title>
Change Page Title in Angular Route using factory Example
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');
}
