Angular.jsでCSSを整理して読み込むためのパターン

Question

私のAngularアプリケーションでは、CSSファイルをモジュール形式でロードしたいと思います。各モジュールには独自のCSSファイルがあります。こうすることで、モジュールを簡単に追加、削除、移動することができます。

私はそれを行うにはこれまでに見つかった最良の方法は、サービスを作成することである：

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

各コントローラの負荷、それはテンプレートのCSSです。 私はパスを（別のサービスによって）注入しますが、それでも私はロジックとビューの間の分離を壊しているように感じます。

これは、CSSファイルを1つの巨大なファイルにパッケージングすることは含まれていません。

Answer 1

ターゲットがHTML5ブラウザで、モジュールごとにビューがあると仮定した場合、ビュー内でscoped stylesheetsを使用してこれを実行できます。 CSSファイルを使用する場合は、@import構文を使用して、<style>タグにcssファイルを読み込むことができます。ここにはビューのHTMLがあります：

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

チェックアウトthis plunker Mac OS Xの最新バージョンのChrome（27.x）とFirefox（21.x）で動作しました。

パフォーマンス上の理由から、@importを使用することをお勧めします。実際には、ページの読み込みと適用されるスタイルとの間にわずかな遅延があることがわかります。