Comment changer le titre de la page dans Angular en utilisant $ routeProvider

J'ai trouvé plusieurs questions similaires, cependant aucune des réponses aidé. Ils semblent tous impliquent un certain type de $location dépendances que je ne suis pas en mesure d'obtenir injecté droit.

Mon code ci-dessous:

(function() {
//App dependencies
var app = angular.module('portalExchange',
['ngRoute',
'app-products',
'app-manage',
'app-profile']);
//[ Main Controller ] : PortalController
app.controller('PortalController', function($scope) {
if ($('.top_link_dashboard').hasClass('unactive_top')) {
$('.top_link_dashboard').removeClass('unactive_top');
$('.top_link_dashboard').addClass('active_top');
}
});
//Controller for Dashboard
app.controller('DashboardController', function() {
});
//Controller for Developers
app.controller('DevelopersController', function($scope) {
//Page.setTitle('Developers');
});
//Controller for Quote
app.controller('QuoteController', function($scope) {
//Page.setTitle('Begin Quote');
});
//Directive for Header
app.directive('appHeader', function () {
//Type of Directive, E for element, A for Attribute
//url of a template
return {
restrict: 'E',
templateUrl: 'templates/modules/globals/app-header.html'
};
});
//Directive for Footer
app.directive('appFooter', function () {
return {
restrict: 'E',
templateUrl: 'templates/modules/globals/app-footer.html',
controller: function(){
this.date = Date.now();
},
controllerAs:'footer'
};
});
//configure our routes
app.config(function($routeProvider) {
$routeProvider
//route for the dashboard page
.when('/', {
templateUrl : 'templates/sections/app-dashboard.html',
controller  : 'DashboardController'
})
//route for the dashboard page
.when('/dashboard', {
title : 'My Dashboard',
templateUrl : 'templates/sections/app-dashboard.html',
controller  : 'DashboardController'
})
//route : Developers Page
.when('/developers', {
title : 'For Developers',
templateUrl : 'templates/sections/app-developers.html',
controller  : 'DevelopersController'
})
//route : Begin Quote
.when('/quote', {
title : 'Begin Quote',
templateUrl : 'templates/sections/app-quote.html',
controller  : 'QuoteController'
});
});
app.run(['$rootScope', '$route', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
if (oldVal !== newVal) {
document.title = $route.current.title;
}
});
}]);
})();

La fonction RUN

app.run(['$rootScope', '$route', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
if (oldVal !== newVal) {
document.title = $route.current.title;
}
});
}]);

HTML

<!DOCTYPE html>
<html lang="en" ng-app="portalExchange" ng-controller="PortalController as portal">
<head>
<meta charset="utf-8">
<title ng-bind="title">myApp</title>
</head>

source d'informationauteur Leon Gaban

  1. 44

    La façon dont je le fais, c'est assez simple. En route configuration que vous définissez title:

    .when('/dashboard', {
title : 'My Dashboard',
templateUrl : 'templates/sections/app-dashboard.html',
controller  : 'DashboardController'
})

    puis vous écouter $routeChangeSuccess événement et juste définir document.title. Dans l'exécution de l'application block (le meilleur endroit pour ça):

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

    L'avantage de cette approche est qu'il vous permet d'éviter que l'une des plus contraignantes ng-bind="title"ce qui est bon.

  2. 4

    C'est une autre façon

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

    Parce que parfois, $route injection causes du problème (par exemple, dans l'exécution des tests unitaires).

  3. 2

    C'est un peu du sujet, mais j'ai essayé de gérer le titre de la page dans angulaire de l'application qui utilise ui-router et j'ai rencontré un couple de questions. Tout d'abord, bien sûr, j'ai dû changer route et $routeChangeSuccess à $state et $stateChangeSuccess et la deuxième, j'ai eu un problème avec le titre de la page d'obtenir une mise à jour avant que le navigateur puisse ajouter le précédent titre de la page pour l'histoire, j'ai donc dû ajouter un délai d'attente pour le gestionnaire d'événement entraînant le code suivant:

    angular.module('myApp').run(appRunFunction);
appRunFunction.$inject = ['$rootScope', '$state', '$timeout'];
function appRunFunction($rootScope, $state, $timeout) {
$rootScope.$on('$stateChangeSuccess', function() {
$timeout(function() { document.title = $state.current.title; }, 100);
});
}