BinaryDevelop
  1. ホーム
  2. css

[解決済み] AngularJSでビュー/部分固有のスタイリングを含む方法

2022-07-02 13:28:49

質問

私のアプリケーションが使用する様々なビューのために別々のスタイルシートを使用するための適切な/受け入れられた方法は何ですか？

現在、私はビュー/パーシャルのhtmlの一番上にlink要素を配置していますが、すべてのモダンブラウザがそれをサポートしているにもかかわらず、私はこれが悪い習慣であると言われましたが、私はそれが嫌われる理由を理解することができます。

もうひとつの可能性は、別々のスタイルシートをindex.htmlの head の中に置くことですが、パフォーマンスの名目でそのビューがロードされている場合にのみスタイルシートをロードするようにしたいのです。

スタイルシートがサーバーから読み込まれるまで有効にならないので、遅いブラウザで書式なしコンテンツの迅速なフラッシュにつながるので、これは悪い習慣でしょうか？ローカルでテストしていますが、私はまだこれを目撃したことがありません。

に渡されたオブジェクトを通してCSSをロードする方法はありますか？ $routeProvider.when ?

ありがとうございました。

どのように解決するのですか？

この質問はもう古いのですが、この問題に対するさまざまな解決策を大量に調べた結果、よりよい解決策を思いついたかもしれません。

UPDATE 1: この回答を投稿してから、私はこのコードをすべてGitHubに投稿したシンプルなサービスに追加しました。 レポは次の場所にあります。 ここにあります。 . より詳細な情報を得るために、自由にチェックしてください。

UPDATE 2: この回答は、ルート用のスタイルシートを取り込むための軽量なソリューションが必要な場合に最適です。もし、アプリケーション全体でオンデマンドスタイルシートを管理するためのより完全なソリューションが必要であれば、次のものをチェックアウトしたいかもしれません。 Door3のAngularCSSプロジェクト . これは、より細かい機能を提供します。

将来の誰かが興味を持つかもしれないので、私が思いついたものを紹介します。

1. のカスタムディレクティブを作成します。 <head> 要素にカスタムディレクティブを作成します。 

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) {
                    if(current && current.$$route && current.$$route.css){
                        if(!angular.isArray(current.$$route.css)){
                            current.$$route.css = [current.$$route.css];
                        }
                        angular.forEach(current.$$route.css, function(sheet){
                            delete scope.routeStyles[sheet];
                        });
                    }
                    if(next && next.$$route && next.$$route.css){
                        if(!angular.isArray(next.$$route.css)){
                            next.$$route.css = [next.$$route.css];
                        }
                        angular.forEach(next.$$route.css, function(sheet){
                            scope.routeStyles[sheet] = sheet;
                        });
                    }
                });
            }
        };
    }
]);

このディレクティブは以下のことを行います。

  1. コンパイル( $compile のセットを作成する html 文字列をコンパイルします。 <link /> タグのセットを作成します。 scope.routeStyles オブジェクトの各項目を ng-repeat と ng-href .
  2. それは、そのコンパイルされたセットの <link /> 要素を <head> タグに追加します。
  3. そして、その後に $rootScope をリッスンするために '$routeChangeStart' のイベントをリッスンします。 すべての '$routeChangeStart' イベントごとに、quot;current" を取得します。 $$route オブジェクト (ユーザが去ろうとしているルート) を取得し、その部分固有の css ファイル (複数可) を <head> タグから削除します。 また、"next" $$route オブジェクト (ユーザーが移動しようとしているルート) を取得し、その部分固有の css ファイル (複数可) を <head> タグに追加します。
  4. そして、その ng-repeat の部分は、コンパイルされた <link /> タグは、ページ固有のスタイルシートの追加と削除のすべてを scope.routeStyles オブジェクトに追加されたり削除されたりするものに基づいて、 ページ固有のスタイルシートの追加と削除をすべて行います。

注意してください。 このためには、あなたの ng-app 属性が <html> 要素ではなく <body> の内部でもなく <html> .

2. どのスタイルシートがどのルートに属しているかは $routeProvider : 

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl'
        })
        .when('/some/route/3', {
            templateUrl: 'partials/partial3.html',
            controller: 'Partial3Ctrl',
            css: ['css/partial3_1.css','css/partial3_2.css']
        })
}]);

この設定により、カスタム css プロパティを各ページのルートを設定するために使われるオブジェクトに追加します。 そのオブジェクトは、それぞれの '$routeChangeStart' イベントに .$$route . そのため '$routeChangeStart' イベントをリスニングしているとき、私たちは css プロパティを取得し、それらの <link /> タグを追加・削除します。 ただし css プロパティの指定は完全に任意であることに注意してください。 '/some/route/2' の例で省略したように、完全に任意です。もしルートに css プロパティがない場合は <head> ディレクティブはそのルートに対して単に何もしません。 また、ルートごとに複数のページ固有のスタイルシートを持つことができることに注意してください。 '/some/route/3' の例のように、ルートごとに複数のページ固有のスタイルシートを持つこともできることに注意してください。 css プロパティは、そのルートに必要なスタイルシートへの相対パスの配列です。

3. 完了です この2つが必要なものをすべてセットアップし、私の意見では、可能な限りきれいなコードでそれを行っています。

私と同じようにこの問題で苦労している他の誰かの助けになることを願っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します