如何使用 $routeProvider 在 Angular 中更改页面标题

编程入门 行业动态 更新时间:2024-10-02 22:20:27
本文介绍了如何使用 $routeProvider 在 Angular 中更改页面标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

我发现了几个类似的问题,但是没有一个答案有帮助.它们似乎都涉及某种我无法正确注入的 $location 依赖项.

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.

我的代码如下:

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

})();

运行函数

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>

推荐答案

我的方法很简单.在路由配置中定义 title:

The way I do it is quite simple. In route configuration you define title:

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

然后你监听$routeChangeSuccess 事件并设置document.title.在应用程序运行块中(最好的地方):

then you listen $routeChangeSuccess event and just set 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;
    });
}]);

这种方法的好处是它可以让您避免更多绑定ng-bind="title",这很好.

The benefit of this approach is that it allows you to avoid one more binding ng-bind="title", which is good.

这篇关于如何使用 $routeProvider 在 Angular 中更改页面标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

更多推荐

[db:关键词]

本文发布于:2023-04-21 17:22:51,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1007850.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:如何使用   页面   标题   Angular   routeProvider

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!