包含視圖+控制器+樣式

我需要創建一個基本視圖，並在其中包含「模塊」。包含視圖+控制器+樣式

我稱之爲模塊的是：視圖（HTML頁面），控制器（Javascript）和樣式（CSS）。

目前，我需要將所有的javascripts包含在index.html的末尾，我的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>

我希望這是有道理的......

來源

2016-03-21 carndacier

一個指令將有利於這一點。 –

我不是一個angularJS專家，但你有一個片段或一個指令的例子可以做到這一點？ – carndacier

https://docs.angularjs.org/guide/directive。我強烈建議學習更多關於指令的知識，因爲這將有助於在時間到來時轉換到angular2 –

你的指令 -

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>

然後在您的視圖

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

在問候你的CSS你確實應該使用像LESS或SASS，創建單獨的文件，然後使用一個構建全球大型CSS文件一些像Grunt，Gulp這樣的任務跑步者。

所有有關模塊1可以只是module1

例子開始你的CSS：

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

這裏的普拉克的鏈接... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview

來源

2016-03-21 16:29:29

謝謝，這就是我問:)我現在試試這個 – carndacier

@carndacier我在上面的帖子中添加了一個plunk鏈接 –

包含視圖+控制器+樣式

回答

相關問題