Pattern per l'organizzazione e il caricamento di CSS in Angular.js

Question

Nella mia applicazione Angular voglio caricare i file css in modo modulare - ogni modulo ha il proprio file css. In questo modo posso aggiungere, rimuovere o spostare facilmente i moduli.

Il modo migliore che ho trovato finora per farlo è attraverso la creazione di un servizio:

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

Ogni carichi di controller è template css. Anche se inserisco il percorso (con un altro servizio), tuttavia mi sembra di interrompere la separazione tra la logica e la vista.

C'è un altro modo elegante (che non include il confezionamento dei file css in un unico file enorme)?

Answer 1

Se la destinazione è un browser HTML5 e presupponendo che si disponga di una vista per modulo, è possibile utilizzare scoped stylesheets nelle visualizzazioni per ottenere ciò. Se si desidera utilizzare un file css, è possibile utilizzare la sintassi @import per caricare il file css nel tag <style>. Ecco un codice HTML di una vista:

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

Check out this plunker. Ha funzionato per me nell'ultima versione di Chrome (27.x) e Firefox (21.x) in Mac OS X.

Si prega di notare che molti raccomandano l'uso dello @import per motivi di prestazioni. In effetti, puoi notare che c'è un leggero ritardo tra il caricamento della pagina e lo stile applicato.