AngularJS 애플리케이션에서 뷰별 스타일시트를 효율적으로 관리하는 방법은 무엇입니까?

경로 기반 스타일링으로 AngularJS 뷰 보호

개요

AngularJS 애플리케이션에는 사용자 경험을 향상시키기 위해 다양한 뷰에 대해 별도의 스타일시트가 필요한 경우가 많습니다. 그러나 개별 뷰의 요소는 성능 문제를 일으킬 수 있습니다. 이 기사에서는 레이아웃 변경을 최소화하면서 보기별 스타일시트를 동적으로 로드하는 포괄적인 솔루션을 살펴봅니다.

제안된 솔루션

제안된 솔루션에는 요소 및 AngularJS $routeProvider 구성 업데이트.

Custom 지시문

1. RouteStyles 범위 개체를 기반으로 하는 요소입니다.
2. 이 요소를 태그.
3. $routeChangeStart 이벤트를 수신하고 현재 및 다음 경로를 기반으로 하는 요소.

AngularJS 경로 구성

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