如何在 AngularJS 应用程序中有效管理特定于视图的样式表？

使用基于路由的样式保护 AngularJS 视图

概述

AngularJS 应用程序通常需要针对不同视图使用单独的样式表，以增强用户体验。然而，使用 个人视图中的元素可能会导致性能问题。本文探讨了动态加载特定于视图的样式表的综合解决方案，最大限度地减少布局移动。

建议的解决方案

建议的解决方案涉及为

创建自定义指令。元素并更新 AngularJS $routeProvider 配置。

自定义 ;指令

1. 定义一个编译一组的指令。基于routeStyles范围对象的元素。
2. 附加这些; 元素
3. 监听 $routeChangeStart 事件并添加/删除 基于当前和下一个路由的元素。

AngularJS 路由配置

1. 为 $routeProvider 配置中的每个路由对象添加 css 属性。
2. 指定对应于样式表的相对路径

实现

自定义指令：

app.directive('head', ['$rootScope','$compile', function($rootScope, $compile) {
    return {
        restrict: 'E',
        link: function(scope, elem) {
            var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
            elem.append($compile(html)(scope));
            scope.routeStyles = {};

            $rootScope.$on('$routeChangeStart', function (e, next, current) {
                ... (code to add/remove `<link>` elements based on routes) ...
            });
        }
    }
}]);

AngularJS 路由配置：

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html',
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })

        ... (other routes as needed) ...
}]);

以上是如何在 AngularJS 应用程序中有效管理特定于视图的样式表？的详细内容。更多信息请关注PHP中文网其他相关文章！