7

私の 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 つの巨大なファイルにパックすることは含まれません)。

4

1 に答える 1

2

ターゲットが HTML5 ブラウザーで、モジュールごとにビューがあると仮定すると、ビューで範囲指定されたスタイルシートを使用してこれを実現できます。css ファイルを使用する場合は、構文を使用して css ファイルをタグ@importにロードできます。<style>ビューの HTML は次のとおりです。

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

このプランカーをチェックしてください。Mac OS X の最新バージョンの Chrome (27.x) と Firefox (21.x) で動作しました。

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

于 2013-06-02T14:09:48.207 に答える