Bootstrap (Frontend) + ngMaterial (Backend) zusammen in Angular-Meteor App?

Question

Gibt es eine Möglichkeit, JS selektiv abhängig vom Modul zu laden?

Ich möchte Bootstrap.css in Vorlagen enthalten, die in Frontend und Angular Material für Templates sind, die im Back-End meiner App sind.

Derzeit, wenn ich bootstrap.css in einer Komponente importieren, ist es global geladen, was ich nicht will. Dies bedeutet auch, dass backend.css und ngMaterial auch in Frontend-Komponenten geladen werden ...

Answer 1

So die Möglichkeit, CSS CSS-bedingt zu laden, ist nicht sehr elegant, aber funktioniert.

Ich benutze Angular UI Router und wenn es darum geht Route zu lösen, ich anhänge/link Tag mit CSS-Blatt mit angular.element(). In meinem Fall handelt es sich um abstrakte Routen für Backend und Frontend. Daher löst (und hängt/entfernt) Link-Tags nur einmal beim Durchsuchen von Kinderrouten.

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