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 중국어 웹사이트의 기타 관련 기사를 참조하세요!