Angular-MeteorアプリでBootstrap（フロントエンド）+ ngMaterial（バックエンド）を一緒に使用しますか？

Question

モジュールに応じてJSを選択的にロードする方法はありますか？

フロントエンドにあるテンプレートにはBootstrap.cssが、私のアプリケーションのバックエンドにはテンプレートの角材が含まれています。

現在、私はbootstrap.cssを1つのコンポーネントにインポートすると、グローバルにロードされますが、これは望ましくありません。これは、backend.cssとngMaterialもフロントエンドコンポーネントにロードされることを意味します...

Answer 1

私が思いついたCSSを条件付きでロードする方法はあまりエレガントではありませんが動作します。

私はAngular UI Routerを使用しています。ルートを解決するには、angular.element()を使用してlinkタグをCSSシートに追加/削除してください。私の場合、それはバックエンドとフロントエンドのための抽象的なルートなので、リンクするタグを解決します（そして、追加/削除します）。

// Frontend - add Bootstrap 

$stateProvider 
.state('front', { 
    url: "", 
    abstract: true, 
    templateUrl, 
    resolve: { 
     importBootstrapCss() { 
      let head = angular.element(document.querySelector('head')); 
      head.append("<link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' id='bootstrap-css'>"); 
     } 
    } 
}); 

// Backend - remove Bootstrap 

$stateProvider 
.state('backend', { 
    url: "/backend", 
    abstract: true, 
    templateUrl, 
    resolve: { 
     deleteBootstrapCss() { 
      let link = angular.element(document.getElementById('bootstrap-css')); 
      link.remove(); 
     } 
    } 
});