Görünüm + denetleyici + stili dahil

Question

Bir temel görünüm oluşturmalı ve içinde "modüller" bulunmalı.

Aradığım modül şöyledir: Görünüm (HTML sayfası), Denetleyici (Javascript) ve Stil (CSS).

Şu anda, dizinimdeki tüm javascript'leri index.html ve css öğesinin sonuna eklemem gerekiyor ... AMA, bazen tüm modüllerimi yüklemeyeceğim.

Eğer sayfamda, 1/2/3 modülünü görüntülemem gerekiyorsa, sadece Modül 4'lerini değil, yalnızca görünümlerini/denetleyicilerini/stillerini eklemek istiyorum.

ngView ve ngInclude ile denedim, ancak ilgili javascript'i koyduğumda her zaman bir hata alıyorum. İşte

ne istiyorsunuz bir örnektir:

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

sonuç> === Ben mantıklı umut

<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

Kişisel yönergesi olurdu -

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:

Gerçekten AZ veya SASS gibi bir şey kullanıyor olmalıdır sizin css gelince sizin bakış

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

üzerinde Sonra

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

ardından kullanılarak büyük bir küresel CSS dosyası oluşturma, ayrı dosyalar oluşturma Grunt, Gulp gibi bir çeşit görev koşucusu.

Tüm sadece module1

Örnek ile başlayabilir module1 ilişkin CSS: Burada

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

düşmek için bir link ... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview