AngularJS - Change Page Title Based on Routes Dynamically

Hi Artisan,

today, we will learn how to set dynamically title tag on page in AngularJS Application. If you work on angularjs app then you know page would not reload during click on link or form submit, but we need to set dynamically title element on each page that way we can make better SEO.

So if you want to set dynamically title tag on page based on routes in AngularJS then you can follow bellow code and check how it works. So let's see bellow code:

Example Code Solution:

app.js


app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: '/partials/home.html',
            controller: 'HomeCtrl',
            title: 'Home Page'
        }).
        when('/contactus', {
            templateUrl: '/partials/contact-us.html',
            controller: 'ContactusCtrl',
            title: 'Contact Us Page'
        }).
      otherwise({
          redirectTo: '/home'
      });
} ]);

Set Title Scope:


app.controller('HDTutoCtrl', ['$scope', function ($scope) { 
    $scope.$on('$routeChangeSuccess', function (event, data) {
        $scope.hd_page_title = data.title;
    });
} ]);

User Title:


<head ng-controller="HDTutoCtrl">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{hd_page_title}} | HDTuto.com App</title>

AngularJS - Change Page Title Based on Routes Dynamically

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles