Modèle d'organisation et de chargement des CSS dans Angular.js

Question

Dans mon application Angular, je veux charger les fichiers css de manière modulaire - chaque module a son propre fichier css. De cette façon, je peux ajouter, supprimer ou déplacer des modules facilement.

La meilleure façon de procéder que j'ai trouvée jusqu'à présent est de créer un service :

angular.module('cssLoadingService', []).factory("CssLoadingService", function () {
  return {
    loadCss: function (url) {
      if (document.createStyleSheet) { //IE
        document.createStyleSheet(url);
      } else {
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
      }
    }
  };
});

Chaque contrôleur charge son modèle css. Bien que j'injecte le chemin (par un autre service), j'ai l'impression de rompre la séparation entre la logique et la vue.

Existe-t-il une autre méthode élégante (qui n'inclut pas le regroupement des fichiers css dans un énorme fichier) ?

Answer 1

Si votre cible est un navigateur HTML5, et en supposant que vous avez une vue par module, vous pouvez utiliser feuilles de style délimitées dans vos vues pour y parvenir. Si vous souhaitez utiliser un fichier css, vous pouvez utiliser @import pour charger le fichier css dans le fichier <style> tag. Voici le code HTML d'une vue :

<div>
  <style scoped>@import url('main.css')</style>
  <h1>This is Main and should be Gray</h1>
</div>

Vérifier ce plunker . Cela a fonctionné pour moi dans la dernière version de Chrome (27.x) et de Firefox (21.x) sous Mac OS X.

Veuillez noter que de nombreuses personnes déconseillent l'utilisation de @import pour des raisons de performance. En fait, vous pouvez voir qu'il y a un léger délai entre le chargement de la page et l'application du style.