Comment gérer efficacement les feuilles de style spécifiques à une vue dans les applications AngularJS ?

Sécurisation des vues AngularJS avec un style basé sur les routes

Présentation

Les applications AngularJS nécessitent souvent des feuilles de style distinctes pour différentes vues afin d'améliorer l'expérience utilisateur. Cependant, en utilisant les éléments des vues individuelles peuvent entraîner des problèmes de performances. Cet article explore une solution complète pour charger dynamiquement des feuilles de style spécifiques à une vue, minimisant ainsi le changement de disposition.

Solution proposée

La solution proposée implique la création d'une directive personnalisée pour le et mise à jour de la configuration AngularJS $routeProvider.

Custom Directive

1. Définir une directive qui compile un ensemble de éléments basés sur l'objet de portée routeStyles.
2. Ajoutez ces éléments éléments vers le tag.
3. Écoutez les événements $routeChangeStart et ajoutez/supprimez éléments basés sur les routes actuelles et suivantes.

Configuration de la route AngularJS

1. Ajoutez une propriété CSS à chaque objet route dans la configuration $routeProvider.
2. Spécifiez chemins relatifs vers les feuilles de style qui correspondent au route.

Mise en œuvre

Directive personnalisée :

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

Configuration de la route 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) ...
}]);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!