change title of a page with angularjs routing

Question

I want to change the page title of my page using routing, so far my title s getting changed but my url is being appended in the title. Any clue as to why?

index.html:

<title ng-bind-html="title ">Website Name</title>

JS file

app.config(function($stateProvider,$urlRouterProvider) {
         .state('dashboard', {
            url: "/dashboard",
            templateUrl: "partials/content/dashboard.html",
            controller: "dashboardCtrl"
         })
 });

app.run(function ($rootScope, $state, $stateParams) {   
         //set it here
     $rootScope.title = $state.current.title;        
});

score 3 · Answer 1 · edited May 23 '17 at 10:29

3

Use $routeChangeSuccess .

app.run(['$location', '$rootScope', function($location, $rootScope) {
        $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
            $rootScope.title = current.$$route.title;
        });
    }]);

Then in Html , Use ng-bind

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp</title>

Fore more reference read - How to dynamically change header based on AngularJS partial view? or How to set page title with Angular

edited May 23 '17 at 10:29

Community

1
1

answered Feb 12 '16 at 11:40

NeiL

791
8
35

can you elaborate more , how you implemented? – NeiL Feb 12 '16 at 12:09
I simply used this in my controller $rootScope.title = 'my title'; and the same HTML as you mentioned. – Miss Doubtfire Feb 18 '16 at 06:47

score 2 · Answer 2 · answered Feb 12 '16 at 11:40

2

Just put it into data:

app.config(function($stateProvider,$urlRouterProvider) {  
   .state('dashboard', { 
         url: "/dashboard", 
         templateUrl:      "partials/content/dashboard.html",  
         controller: "dashboardCtrl",
         data: {
             title: 'Dashboard title'
          }
 }) });

answered Feb 12 '16 at 11:40

Stepan Suvorov

25,118
26
108
176

$rootScope.title = $state.current.data.title; – Stepan Suvorov Feb 12 '16 at 12:07

Mark Rogers · Answer 3 · 2017-02-02T15:43:14.157

You need to use the title property for the when function of $routeProvider, like so:

var module = angular.module('yourApp.routes', []);

module.config([
    '$routeProvider', function ($routeProvider) {
         $routeProvider
             .when('/dashboard', {
                 title: 'Dashboard',
                 templateUrl: "partials/content/dashboard.html",
                 controller: "dashboardCtrl"
              })
    }
]);

return module;

Title can be accessed in $scope or in a view:

<h1 data-ng-bind="::title"></h1>

change title of a page with angularjs routing

3 Answers3