包含视图+控制器+样式

我需要创建一个基本视图，并在其中包含“模块”。包含视图+控制器+样式

我称之为模块的是：视图（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链接 –

包含视图+控制器+样式

回答

相关问题