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;        
});

Community · Accepted Answer · 2017-05-23 10:29:28Z

4

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 12, 2016 at 11:40

NeiL

80110 silver badges38 bronze badges

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

2 Comments

NeiL Over a year ago

can you elaborate more , how you implemented?

Miss Doubtfire Over a year ago

I simply used this in my controller $rootScope.title = 'my title'; and the same HTML as you mentioned.

Stepan Suvorov · Accepted Answer · 2016-02-12 11:40:11Z

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, 2016 at 11:40

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

1 Comment

Stepan Suvorov Over a year ago

$rootScope.title = $state.current.data.title;

Mark Rogers · Accepted Answer · 2017-02-02 15:43:14Z

0

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>

edited Feb 2, 2017 at 15:43

answered Feb 1, 2017 at 17:33

Mark Rogers

97.9k19 gold badges92 silver badges142 bronze badges

Collectives™ on Stack Overflow

change title of a page with angularjs routing

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related