How do I set Page Title in AngularJS 1.4.4

Question

I have the following html

<!doctype html>
<html lang="en" data-ng-app="AlexsApp">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{$scope.title}}</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/site.min.css">
  </head>
  <body>
    <!-- Site Navigation area -->
    <nav class="navbar navbar-inverse navbar-fixed-top transparent">
      <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#/">
          <img src="assets/img/alex_logo_sm.png" alt="Alex Pittendreigh's Logo">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li>
            <a href="#/contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main content area -->
  <div class="container" data-ng-view>
  </div>

  <!-- Site Footer navigation -->
  <nav class="hidden-xs navbar navbar-inverse navbar-fixed-bottom transparent">
      <div class="container-fluid">
      <p id="footer-text">Copyright &copy; 2015 Alex Pittendreigh. All rights reserved.</p>
    </div>
  </nav>

  <!-- Site script files -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="assets/js/site.js"></script>
</body>

and the following javascript file

var app = angular.module('AlexsApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.
    when('/', { 
      controller: 'HomeCtrl', 
      templateUrl: 'assets/partials/home.html' 
    }).
    when('/contact', { 
      controller: 'ContactCtrl', 
      templateUrl: 'assets/partials/contact.html' 
    }). 
    otherwise({ 
      redirectTo: '#/' 
    });
});

app.controller('HomeCtrl', function($scope, $http) { 
  $scope.title='Alex Pittendreigh';
});

app.controller('ContactCtrl', function($scope, $http) {
  $scope.title='Contact Alex Pittendreigh';
});

The other two files are simple HTML content that gets loaded when a new route is selected in Angular.

My problem is that I want to change the page title when a route changes and this is not happening. Instead I tend to get the route displayed as a title.

I have tried several sources on StackOverflow and looked through the documentation but haven;t actually found a solution that works for me.

Can anyone help please?

Try with <title>{{title}}</title>, $scope is implicit in angular views. — aghidini
– aghidini, Commented Aug 31, 2015 at 10:27

maxmantz · Accepted Answer · 2015-08-31 17:14:27Z

1

Michelem's answer should work fine. However as a general hint, try to avoid using $scope in your application and use controllerAs syntax instead and declare your $scope properties directly on the controller.

$scope has the nasty habit of being unclear which scope is being used when you have different controllers on a single page, like your setup with the AppCtrl as the root and the injected controller in the data-ng-viewelement.

In addition, $scope will be removed from Angular 2, so if you're planning to migrate your app to Angular 2 in the future, you should avoid using it.

So basically your code should look like this:

<html lang="en" data-ng-app="AlexsApp" ng-controller="AppCtrl as app">
 <head> 
  ...
 <title>{{app.title}}</title>
  ...
</head>
  ...

and declare your routes like this:

app.config(function($routeProvider) {
 $routeProvider.
   when('/', { 
      controller: 'HomeCtrl', 
      controllerAs: 'home',
      templateUrl: 'assets/partials/home.html',
      title: 'Alex Pittendreigh'
}).
   when('/contact', { 
      controller: 'ContactCtrl', 
      controllerAs: 'contact',
      templateUrl: 'assets/partials/contact.html',
      title: 'Contact Alex Pittendreigh'
}). 
   otherwise({ 
     redirectTo: '/' 
   });
});

and declare your AppCtrl like this:

.controller('AppCtrl', function($rootScope, $route) {
   var self = this;
   self.title = 'Initial Title';
   $rootScope.$on('$routeChangeSuccess', function() {
     self.title = $route.current.title;
 });
});

Further reading on $scope vs controllerAs: http://codetunnel.io/angularjs-controller-as-or-scope/

It might also be worthwhile to look at the angular-ui-router: https://github.com/angular-ui/ui-router as it is able to handle more complex tasks, such as nested views, which the ngRoute can't accomplish.

edited Aug 31, 2015 at 17:14

answered Aug 31, 2015 at 11:38

maxmantz

7121 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Pittendreigh Over a year ago

Thanks for your reply which got me a little further along the path. As i commented to Michelem;s answer above, all I am now getting is the page title "Initial Title" and no the titles I was after.

Alex Pittendreigh Over a year ago

The next step is to try the links you gave, as it's getting late this will be a job for tomorrow.

maxmantz Over a year ago

There seems to be something wrong with the event registration. I've edited the registration function to remove the "return function" statement. Check it out and see if this helps.

michelem · Accepted Answer · 2015-08-31 10:39:23Z

1

I'd do this:

Place a main controller AppCtrl in the HTML tag and add the correct title bind:

<html lang="en" data-ng-app="AlexsApp" ng-controller="AppCtrl">
  <head> 
    <title>{{pageTitle}}</title>
  </head>

Then change your routes to add title property:

app.config(function($routeProvider) {
  $routeProvider.
    when('/', { 
      controller: 'HomeCtrl', 
      templateUrl: 'assets/partials/home.html',
      title: 'Alex Pittendreigh'
    }).
    when('/contact', { 
      controller: 'ContactCtrl', 
      templateUrl: 'assets/partials/contact.html',
      title: 'Contact Alex Pittendreigh'
    }). 
    otherwise({ 
      redirectTo: '#/' 
    });
});

Finally in the AppCtrl controller assign the title to pageTitle every time the route changes:

.controller('AppCtrl', function($rootScope) {
  return $rootScope.$on('$routeChangeSuccess', (function() {
    return function(event, current, previous) {
      return $rootScope.pageTitle = $route.current.title;
    };
  }));
});

And you are done

answered Aug 31, 2015 at 10:39

michelem

14.6k5 gold badges55 silver badges67 bronze badges

1 Comment

Alex Pittendreigh Over a year ago

Thanks for your answer. It did help somewhat. However I still am not getting the title I was after, even after applying the changes suggested by maxmantz below. What I am now getting is the page title labelled "Initial Title" getting no further.

Collectives™ on Stack Overflow

How do I set Page Title in AngularJS 1.4.4

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related