Angular 合并模块的JS示例

Question

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

在 angular 网页的 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> 的元素指令。请注意 HTML 中单词之间的破折号，但 Javascript 中的驼峰式拼写。这是必要的，因为 HTML 无法识别驼峰式大小写。 Angular知道JS中的appSignUp会引用HTML中的app-sign-up.

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

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

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

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

至于允许各个组件（指令）相互通信，我建议创建 Angular services to GET and SET data within your app and then injecting these services into your controllers using dependency injection。您提到了 'parent state'，从技术上讲，您可以将数据附加到 $rootScope，这是每个指令都可以访问的整个应用程序的根范围。但是，我劝你不要这样做，因为你会污染全局范围，这不是 'Angular way' 实现控制器之间共享状态的方法，服务是。

Angular 合并模块的JS示例

Angular JS example for combining modules

javascript

module

angularjs