如何在 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) ...
            });
        }
    }
}]);

自訂指令：

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 路由配置：

以上是如何在 AngularJS 應用程式中有效管理特定於視圖的樣式表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！