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

Example

READ :  Angular ng-app directive 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;
        });
    } ]);
**********
<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');
}

Example

READ :  Vuejs Add Remove Class to Active Element

Add a Comment

Your email address will not be published. Required fields are marked *