CODEWITHSUNDEEP
angularjs
Miss Doubtfire
Miss Doubtfire

Reputation: 43

change title of a page with angularjs routing

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

Upvotes: 2

Views: 4638

Answers (3)

Mark Rogers
Mark Rogers

Reputation: 97707

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>

Upvotes: 0

NeiL
NeiL

Reputation: 801

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

Upvotes: 4

Stepan Suvorov
Stepan Suvorov

Reputation: 26186

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

Upvotes: 2

Related Questions