Comment éviter les CSS en ligne dans les vues AngularJS et maintenir un code propre et efficace ?

Éviter les CSS en ligne dans les vues AngularJS : bonnes pratiques

L'inclusion de CSS spécifiques aux vues dans les applications AngularJS présente un défi courant. La méthode traditionnelle d'ajout d'un L'élément HTML de la vue est considéré comme obsolète.

Solution proposée

Pour résoudre ce problème, une solution complète a émergé qui offre à la fois flexibilité et optimisations de performances :

Directive personnalisée pour Élément

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) { ... });
            }
        };
    }
]);

Configuration d'itinéraire avec propriété CSS personnalisée

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

Avantages

• Évite les CSS en ligne pour une maintenabilité améliorée
• Applique une approche cohérente à travers le application
• Prend en charge plusieurs feuilles de style spécifiques à une page par itinéraire
• Optimise les performances en chargeant CSS uniquement lorsque la vue correspondante est affichée

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!