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

Comment inclure un style spécifique à une vue dans AngularJS

Gérer correctement les feuilles de style pour différentes vues est essentiel dans une application AngularJS. Traditionnellement, cela se faisait en plaçant éléments directement dans le HTML de chaque vue. Cependant, cette approche est considérée comme une mauvaise pratique malgré la prise en charge du navigateur, car elle peut entraîner des problèmes de performances et de maintenabilité.

Approche préférée

Une méthode privilégiée consiste à charger dynamiquement feuilles de style uniquement lorsqu'une vue spécifique est accédée. Cela garantit des performances optimales et évite les flashs de contenu sans style. Voici comment y parvenir :

1. Créez une directive personnalisée pour Element

Cette directive sera responsable de l'ajout et de la suppression dynamiques de éléments vers le rubrique.

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. Spécifiez l'association de feuille de style dans $routeProvider

Cela implique l'ajout d'une propriété CSS à chaque objet de configuration d'itinéraire. La valeur peut être une chaîne unique représentant le chemin de la feuille de style ou un tableau de chaînes pour plusieurs feuilles de style.

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

Cette configuration chargera dynamiquement les feuilles de style désignées dans le répertoire élément uniquement lorsque les vues correspondantes sont accessibles, garantissant des performances optimales et une expérience utilisateur cohérente.

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!