AngularJS でビュー固有のスタイルシートを動的に管理する方法

AngularJS にビュー固有のスタイルを含める方法

さまざまなビューのスタイルシートを適切に管理することは、AngularJS アプリケーションでは不可欠です。従来、これは を配置することで行われていました。各ビューの HTML 内に要素を直接追加します。ただし、このアプローチはブラウザのサポートにもかかわらず、パフォーマンスの問題や保守性の問題を引き起こす可能性があるため、不適切な方法であると考えられています。

推奨されるアプローチ

推奨される方法は、動的にロードすることです。特定のビューに移動した場合にのみスタイルシートを使用します。これにより、最適なパフォーマンスが保証され、スタイルの設定されていないコンテンツのフラッシュが防止されます。これを実現する方法は次のとおりです。

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

このディレクティブは、ページ固有の を動的に追加および削除します。要素を

に追加します。セクション。

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

2. $routeProvider

でスタイルシートの関連付けを指定する これには、各ルート構成オブジェクトに 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'
    })
    .when('/some/route/3', {
      templateUrl: 'partials/partial3.html',
      controller: 'Partial3Ctrl',
      css: ['css/partial3_1.css','css/partial3_2.css']
    })
}]);

この設定では、指定されたスタイルシートが

に動的にロードされます。対応するビューに移動した場合にのみ要素が追加されるため、最適なパフォーマンスと一貫したユーザー エクスペリエンスが保証されます。

以上がAngularJS でビュー固有のスタイルシートを動的に管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。