AngularJS アプリケーションでビュー固有のスタイルシートを効率的に管理するにはどうすればよいですか?

ルートベースのスタイリングによる AngularJS ビューのセキュリティ保護

概要

AngularJS アプリケーションでは、ユーザー エクスペリエンスを向上させるために、さまざまなビューに個別のスタイルシートが必要になることがよくあります。ただし、 を使用すると、個々のビュー内の要素はパフォーマンスの問題を引き起こす可能性があります。この記事では、ビュー固有のスタイルシートを動的に読み込み、レイアウトの移動を最小限に抑えるための包括的なソリューションを検討します。

提案されたソリューション

提案されたソリューションには、 のカスタム ディレクティブの作成が含まれます。要素と AngularJS $routeProvider 設定の更新。

Custom ディレクティブ

1. 一連の をコンパイルするディレクティブを定義します。 RouteStyles スコープ オブジェクトに基づく要素。
2. これらの を追加します。要素を に追加します。
3. $routeChangeStart イベントをリッスンし、 を追加/削除します。現在および次のルートに基づく要素。

AngularJS Route Configuration

1. $routeProvider 設定の各ルート オブジェクトに css プロパティを追加します。
2. 指定に対応するスタイルシートへの相対パス。 Route.

実装

カスタム ディレクティブ:

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 中国語 Web サイトの他の関連記事を参照してください。