Page Titles Dynamically Using AngularJS – ng-page-title Example

Rate this post

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
———
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]

infinityApp

[/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: ‘/’
});
}]);

READ :  WordPress plugin dependencies on Activation

infinityApp.run([‘$rootScope’, function($rootScope) {
$rootScope.$on(‘$routeChangeSuccess’, function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
[/php]

Example

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;
});
} ]);
**********

{{pageTitle}} | infinityknow.com
[/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; }
};
});

READ :  PHP Simple cURL API call using POST

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]

Example

Leave a Reply

Your email address will not be published.