组合模块的Angular JS示例

Angular JS example for combining modules

本文关键字：JS 示例 Angular 模块 组合      更新时间：2023-09-26

我是Angular JS的新手，正在项目网页上尝试这些例子。它们自己的示例运行得很好，但现在我想更进一步，在一个页面中包含多个模块，以增加对单个模块的重用。

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

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

但是仅仅在CCD_ 1（包括Angular JS）中使用这些行并提供相应的CCD_。

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

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

一个非常通用的例子是一个简单的网页，带有自定义导航栏、注册框和功能部分。像这样的页面的HTML可能看起来像这样：

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

其中CCD_ 4是简单的通用名称。我通常会缩写我正在构建的任何应用程序的名称，并在所有指令名称前加上这个。例如，对于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中的index.html0。

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

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

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

•controllerAs是一个可选属性，允许您为控制器设置"别名"。通过这种方式，您可以使用signUp.pieceOfData将数据附加到您的作用域，这使您的HTML更加具体和清晰。

至于允许各个组件（指令）相互通信，我建议创建Angular服务，以便在应用程序中获取和设置数据，然后使用依赖项注入将这些服务注入控制器。你提到了"父状态"，从技术上讲，你可以将数据附加到$rootScope，CCD_17是你整个应用程序的根范围，每个指令都可以访问。然而，我敦促你不要这样做，因为你会污染全局范围，而且这不是实现控制器之间共享状态的"角度方式"，服务就是。

相关文章：