Include Ansicht + Controller + Stil

Question

Ich muss eine Basisansicht erstellen und "Module" darin enthalten.

Was ich Modul nenne, ist: eine Ansicht (HTML-Seite), ein Controller (Javascript) und ein Style (CSS).

Im Moment muss ich alle meine Javascripts am Ende der index.html und meine CSS am Anfang einfügen ... ABER, manchmal werde ich nicht alle meine Module laden.

Also wenn ich auf meiner Seite, muss ich Modul 1/2/3 anzeigen, ich möchte nur ihre Ansichten/Controller/Stile, und nicht Modul 4 enthalten.

Ich versuchte mit ngView und ngInclude, aber ich bekomme immer einen Fehler, wenn ich das verwandte Javascript setzen. Hier

ist ein Beispiel dafür, was Ich mag würde:

<div ng-include="'modules/module1.html'"></div> 

Das Ergebnis wäre ===>

<link href="modules/module1.css" /> 
<div ng-controller="module1Controller as module1Ctrl"> 
    <h3 class="test">Module 1</h3> 
    <p>It is a test !</p> 
</div> 
<script src="modules/module1.js"></script> 

Ich hoffe, dass es Sinn macht ...

Answer 1

Ihre Richtlinie -

app.directive('module1', function() { 

    var controller = ['$scope', function ($scope) { 

      //CONTROLLER FUNCTIONS HERE 

     }]; 


     return { 
      restrict: 'E', 
      scope: { 
       data: '=data' 
      }, 
      controller: controller, 
      templateUrl: 'module1.html' 
     }; 
    }); 

mod ule1.html:

<h3 class="test">Module 1</h3> 
    <p>It is a test !</p> 

Dann auf Ihrer Ansicht

<module1 data="THIS COULD BE AN OBJECT" /> 

In Bezug auf Ihre CSS sollten Sie wirklich so etwas wie LESS oder SASS verwendet werden, separate Dateien erstellen, dann den Aufbau einer großen globalen CSS-Datei eine Art Aufgabenläufer wie Grunt, Gulp.

Alle Ihre CSS module1 Zusammenhang kann nur mit module1

Beispiel beginnen:

module1 h1{font-size:24px;} 
module1 div.body{width:100px;} 

Hier ist ein Link auf die zupfen ... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview