[英]How to change page title in Angular using $routeProvider
I found several similar questions, however none of the answers helped . 我发现了几个类似的问题, 但没有一个答案有帮助 。 They all seem to involve some type of $location
dependencies that I'm unable to get injected right. 它们似乎都涉及某些类型的$location
依赖项,我无法正确注入。
My code below: 我的代码如下:
(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;
}
});
}]);
})();
The RUN function 运行功能
app.run(['$rootScope', '$route', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
if (oldVal !== newVal) {
document.title = $route.current.title;
}
});
}]);
HTML 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>
The way I do it is quite simple. 我这样做很简单。 In route configuration you define title
: 在路线配置中,您定义title
:
.when('/dashboard', {
title : 'My Dashboard',
templateUrl : 'templates/sections/app-dashboard.html',
controller : 'DashboardController'
})
then you listen $routeChangeSuccess
event and just set document.title
. 然后你听$routeChangeSuccess
事件,只需设置document.title
。 In application run block (the best place for this): 在应用程序运行块(最好的地方):
app.run(['$rootScope', '$route', function($rootScope, $route) {
$rootScope.$on('$routeChangeSuccess', function() {
document.title = $route.current.title;
});
}]);
The benefit of this approach is that it allows you to avoid one more binding ng-bind="title"
, which is good. 这种方法的好处是它允许你避免一个更多的绑定ng-bind="title"
,这是好的。
This is another way 这是另一种方式
app.run(['$rootScope', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function(_, current) {
document.title = current.$$route.title;
});
}]);
Because sometimes $route injection causes problem (for example, in running unit tests). 因为有时$ route注入会导致问题(例如,在运行单元测试中)。
This is a little of topic, but I was trying to manage the page title in an angular application that uses ui-router
and I ran into a couple of issues. 这是一个主题,但我试图在使用ui-router
的角度应用程序中管理页面标题,我遇到了几个问题。 First, of course, I had to change route
and $routeChangeSuccess
to $state
and $stateChangeSuccess
and second, I had an issue with the page title getting updated before the browser could add the previous page title to the history, so I had to add a timeout to the event handler resulting the following code: 首先,当然,我必须将route
和$routeChangeSuccess
更改为$state
和$stateChangeSuccess
,其次,我有一个问题,页面标题在浏览器可以将上一页标题添加到历史记录之前更新,所以我不得不添加事件处理程序超时导致以下代码:
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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.