Angular-Meteor應用程序中的Bootstrap（前端）+ ngMaterial（後端）？

Question

有沒有辦法根據模塊選擇性地加載JS？

我想要在前端模板中包含Bootstrap.css，並且在我的應用程序後端的temaplates中使用Angular Material。

目前，如果我在一個組件中導入bootstrap.css，它會全局加載，我不想要。這也意味着backend.css和ngMaterial也將被加載到前端組件中......

Answer 1

所以有條件地加載CSS的方式我想出來的並不是很優雅，但工程。

我使用的是Angular UI路由器，當涉及到解決路由問題時，我使用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(); 
     } 
    } 
});