javascript - 包含 View + Controller +样式

Question

我需要创建一个基础 View ，并在其中包含“模块”。

我所说的模块是:一个 View (HTML 页面)、一个 Controller (Javascript)和一个样式(CSS)。

目前，我需要在 index.html 的末尾包含我所有的 javascript，在开头包含我的 css...但是，有时我不会加载我的所有模块。

因此，如果在我的页面中，我需要显示模块 1/2/3，我只想包括它们的 View / Controller /样式，而不是模块 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'
      };
  });

module1.html:

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

然后在你看来

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

关于您的 css，您真的应该使用 LESS 或 SASS 之类的东西，创建单独的文件，然后使用某种任务运行器(例如 Grunt、Gulp)构建一个大的全局 CSS 文件。

所有与 module1 相关的 CSS 都可以以 module1 开头

例子:

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

这里是链接到 plunk... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview