1

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?

Improve this question
1
  • 3
    Try with <title>{{title}}</title>, $scope is implicit in angular views. Commented Aug 31, 2015 at 10:27

2 Answers 2

Reset to default
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.

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

3 Comments

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.
The next step is to try the links you gave, as it's getting late this will be a job for tomorrow.
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.
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

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.