Question

我是Angular JS的新手，并尝试了项目webpage上的示例。他们自己的例子运行良好，但现在我想更进一步，在一个页面中包含多个模块，以增加单个模块的重用。

在角度网页的HTML源代码中，我找到了包含示例的地方，例如对于hello和todo示例：

…
<div app-run="hello.html" class="well"></div>
…
<div app-run="todo.html" module="todoApp" class="well"></div>
…

但只是在index.html（包括Angular JS）中使用这些行并提供相应的hello.html和todo.html不起作用。

如何在独立文件中分离Angular JS模块并将它们包含在公共网页中。（也许这也是相关的：稍后，我想让各个组件相互通信，例如通过使用一些共享的父状态）

Answer 1

将Angular应用程序模块化为组件的最佳方法是使用directives。指令是Angular最强大的功能之一，允许您使用自己的HTML模板和控制器构建可重用的组件。

这是一个非常通用的示例，它是一个带有自定义导航栏，注册框和功能部分的简单网页。这样的页面的HTML可能如下所示：

<app-navbar></app-navbar>
<app-sign-up></app-sign-up>
<app-features-panel></app-features-panel>

...其中app是简单的通用名称。我通常缩写我正在构建的任何应用程序的名称，并在其前面加上我的所有指令名称。例如，对于game应用，我可以调用导航栏<gm-navbar>。

现在您可以构建与此类似的每个指令：

angular
  .module('app')
  .directive('appSignUp', appSignUp);

function appSignUp() {
  var directive = {
    restrict: 'E',
    templateUrl: 'app/appSignUp/appSignUp.directive.html',
    link: link,
    controller: AppSignUpController,
    controllerAs: 'signUp'
  };

  return directive;

  function link(scope, el, attr, ctrl) {
    // perform DOM manipulation here
  }
}

让我们简要介绍一下上面的指令定义对象（通常缩写为DDO）：

•restrict: 'E'仅表示此指令仅限于<app-sign-up>形式的Element指令。注意HTML中单词之间的破折号，但是Javascript中的camelCase。这是必要的，因为HTML无法识别骆驼外壳。 Angular知道JS中的appSignUp将引用HTML中的app-sign-up。

•templateUrl只是引用此指令的HTML模板所在的路径。

•link引用您应该执行任何DOM操作的链接函数。注意：Angular附带了一个名为jqLite的jQuery子集，您可以使用它来操作DOM。

•controller只是引用附加到该指令的控制器，其主要职责是将数据附加到DOM。

•controllerAs是一个可选属性，允许您为控制器设置“别名”。这样，您就可以使用signUp.pieceOfData将数据附加到您的范围，从而使您的HTML更加具体和清晰。

至于允许各个组件（指令）相互通信，我建议在应用程序中创建Angular services到GET和SET数据，然后使用dependency injection将这些服务注入控制器。您提到了“父状态”，从技术上讲，您可以将数据附加到$rootScope，这是整个应用程序的根范围，每个指令都可以访问该范围。但是，我强烈建议你不要这样做，因为你会污染全局范围，这不是实现控制器之间共享状态的“角度方式”，服务是。

用于组合模块的Angular JS示例

1 个答案: