AngularJS ビューでインライン CSS を回避し、クリーンで効率的なコードを維持するにはどうすればよいですか?

AngularJS ビューでのインライン CSS の回避: ベスト プラクティス

AngularJS アプリケーションにビュー固有の CSS を含めることには、共通の課題があります。 を追加する従来の方法ビュー HTML 内の要素は古いと考えられます。

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

この問題に対処するために、柔軟性とパフォーマンスの最適化の両方を提供する包括的なソリューションが登場しました。

のカスタム ディレクティブ要素

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) { ... });
            }
        };
    }
]);

カスタム CSS プロパティによるルート構成

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

利点

• 改善のためにインライン CSS を回避します保守性
• アプリケーション全体で一貫したアプローチを強制します
• ルートごとに複数のページ固有のスタイルシートをサポートします
• 対応するビューが表示されるときに CSS のみをロードすることでパフォーマンスを最適化します

以上がAngularJS ビューでインライン CSS を回避し、クリーンで効率的なコードを維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。