La solution de @tennisgent est excellente. Cependant, je pense qu'elle est un peu limitée.
La modularité et l'encapsulation dans Angular vont au-delà des routes. Compte tenu de la manière dont le web évolue vers un développement basé sur les composants, il est important de l'appliquer également dans les directives.
Comme vous le savez déjà, en Angular, nous pouvons inclure des modèles (structure) et des contrôleurs (comportement) dans les pages et les composants. AngularCSS permet la dernière pièce manquante : l'attachement des feuilles de style (présentation).
Pour une solution complète, je suggère d'utiliser AngularCSS.
- Prend en charge ngRoute, UI Router, les directives, les contrôleurs et les services d'Angular.
- Il n'est pas nécessaire d'avoir
ng-app dans le <html> étiquette. C'est important lorsque plusieurs applications fonctionnent sur la même page.
- Vous pouvez personnaliser l'endroit où les feuilles de style sont injectées : head, body, sélecteur personnalisé, etc...
- Prise en charge du préchargement, de la persistance et de la suppression du cache.
- Prise en charge des requêtes média et optimisation du chargement des pages via l'API matchMedia
https://github.com/door3/angular-css
Voici quelques exemples :
Routes
$routeProvider
.when('/page1', {
templateUrl: 'page1/page1.html',
controller: 'page1Ctrl',
/* Now you can bind css to routes */
css: 'page1/page1.css'
})
.when('/page2', {
templateUrl: 'page2/page2.html',
controller: 'page2Ctrl',
/* You can also enable features like bust cache, persist and preload */
css: {
href: 'page2/page2.css',
bustCache: true
}
})
.when('/page3', {
templateUrl: 'page3/page3.html',
controller: 'page3Ctrl',
/* This is how you can include multiple stylesheets */
css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
templateUrl: 'page4/page4.html',
controller: 'page4Ctrl',
css: [
{
href: 'page4/page4.css',
persist: true
}, {
href: 'page4/page4.mobile.css',
/* Media Query support via window.matchMedia API
* This will only add the stylesheet if the breakpoint matches */
media: 'screen and (max-width : 768px)'
}, {
href: 'page4/page4.print.css',
media: 'print'
}
]
});
Directives
myApp.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
En outre, vous pouvez utiliser le $css service pour les cas limites :
myApp.controller('pageCtrl', function ($scope, $css) {
// Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
$css.bind({
href: 'my-page/my-page.css'
}, $scope);
// Simply add stylesheet(s)
$css.add('my-page/my-page.css');
// Simply remove stylesheet(s)
$css.remove(['my-page/my-page.css','my-page/my-page2.css']);
// Remove all stylesheets
$css.removeAll();
});
Vous pouvez en savoir plus sur AngularCSS ici :
http://door3.com/insights/introducing-angularcss-css-demand-angularjs
