July 9, 2018

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

By admin AngularJs, Technology 0 Comments

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 : AngularJS - window resize and angular get element height in controller

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 : Angular get Dynamic Templates

Post Views: 808

Tags:angular 2 set page title, angular 4 page title, angular 4 set page title, angular dynamic html title, angularjs page title directive, dynamically change title of page, ng bind title angularjs, ng-title

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

simple code

How to set Dynamically page title with Angular

index.html

app.js

Change Page Titles Dynamically Using AngularJS Example

Change Page Title in Angular Route using factory Example

Related Posts

Add a Comment