Question

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

我称之为模块的是：视图（HTML页面），控制器（Javascript）和样式（CSS）。

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

因此，如果在我的页面中，我需要显示模块1/2/3，我只想包含他们的视图/控制器/样式，而不是模块4的。

我尝试使用ngView和ngInclude，但是当我放入相关的javascript时，我总是会收到错误。

这是我想要的一个例子：

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

结果将是===＆gt;

<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

的链接

包括视图+控制器+样式

1 个答案: