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

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

    <title>infinityApp</title>


<div></div>

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

Example

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



<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');
}

Example