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; }); }]);
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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'); }