ビュー+コントローラ+スタイルを含む

Question

ベースビューを作成し、その中に「モジュール」を含める必要があります。

私がモジュールと呼ぶのは、ビュー（HTMLページ）、コントローラ（Javascript）、スタイル（CSS）です。

現時点では、index.htmlの最後にすべてのjavascriptを含める必要がありますが、私のcssはうまくいきます...しかし、時々私のすべてのモジュールをロードしません。

私のページに、モジュール1/2/3を表示する必要がある場合、モジュール4ではなく、ビュー/コントローラ/スタイルのみを含めたいとします。

私はngViewとngIncludeを試しましたが、関連するjavascriptを置くとエラーが表示されます。ここで

は私が望むものの一例である：

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

結果は、私はそれが理にかなって願っています===>

<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> 

だろう...

Answer 1

あなたのディレクティブ -

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：あなたは本当に使用して一つの大きな世界的なCSSファイルを構築し、その後、別のファイルを作成し、LESSやSASSのようなものを使用する必要がありますあなたのCSSに関しては

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

次に、あなたのビューに

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

Grunt、Gulpのようなタスクランナーのようなもの。

すべてちょうどmodule1

例で始めることができますModule1をに関するごCSS：ここ

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

plunkへのリンクがある... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview