154

我一直在阅读很多文档，而且我越来越困惑。我基本上无法弄清楚a之间的区别

  • 服务
  • 指示
  • 模块

我看到很多自定义组件。有时他们使用指令，有时使用服务。它总是从一个模块开始。有人可以举例说明这三种类型之间的区别吗？

4

2 回答 2

237

来自我自己的个人笔记（主要来自文档、谷歌群组帖子和 SO 帖子的片段）：

模块

  • 提供命名空间/分组服务、指令、过滤器、配置信息和初始化代码的方法
  • 帮助避免全局变量
  • 用于配置 $injector，允许将模块（或整个模块本身）定义的东西注入其他地方（依赖注入的东西）
  • Angular 模块与 CommonJS 或 Require.js 无关。与 AMD 或 Require.js 模块相反，Angular 模块不会尝试解决脚本加载顺序或延迟脚本获取的问题。这些目标是正交的，两个模块系统可以并存并实现它们的目标（文档声称）。

服务

  • 是单例，因此您定义的每个服务只有一个实例。作为单例，它们不受作用域的影响，因此可以被多个视图/控制器/指令/其他服务访问（共享）
  • 您可以（并且可能应该）在以下情况下创建自定义服务
    • 两个或更多的东西需要访问相同的数据（不要使用根范围），或者你只是想整齐地封装你的数据
    • 您想封装与 Web 服务器的交互（在您的服务中扩展 $resource 或 $http）
  • 内置服务以“$”开头。
  • 要使用服务，依赖项需要注入依赖项（例如，在控制器、其他服务或指令上）。

指令（下面的一些项目说的基本相同，但我发现有时稍微不同的措辞会有很大帮助）

  • 负责在模型状态发生变化时更新 DOM
  • 扩展 HTML 词汇 = 教授 HTML 新技巧。
    Angular 带有一组内置指令（例如，ng-* 的东西），这些指令对于构建 Web 应用程序很有用，但您可以添加自己的指令，以便将 HTML 转换为声明性域特定语言 (DSL)。例如，Angular 主页演示“创建组件”中的 <tabs> 和 <pane> 元素。
    • 不明显的内置指令（因为它们不以“ng”开头）：a、form、input、script、select、textarea。在 Angular 下，这些都比平常做得更多！
  • 指令允许您“组件化 HTML”。指令通常比 ng-include 更好。例如，当您开始编写大量主要使用数据绑定的 HTML 时，将该 HTML 重构为（可重用）指令。
  • Angular 编译器允许您将行为附加到任何 HTML 元素或属性，甚至可以创建具有自定义行为的新 HTML 元素或属性。Angular 将这些行为扩展指令称为。
    • 归根结底，指令只是一个函数，当 Angular 编译器在 DOM 中遇到它时会执行它。
  • 指令是由属性、元素名称、类名称或注释中的名称的存在触发的行为或 DOM 转换。指令是在 (HTML) 编译过程中遇到特定 HTML 结构时应触发的行为。指令可以放置在元素名称、属性、类名以及注释中。
    • 大多数指令仅限于属性。例如，DoubleClick 仅使用自定义属性指令。
  • 另请参阅什么是 angularjs 指令？

在模块中定义和分组 Angular 的东西（依赖注入的东西）。
共享数据并将 Web 服务器交互封装在服务中。
扩展 HTML 并在指令中进行 DOM 操作。
并使控制器尽可能“薄”。

于 2012-11-20T20:57:48.887 回答
125

将模块视为连接许多其他事物的地方，例如指令、服务、常量等。模块可以注入到其他模块中，从而为您提供高水平的重用。

在编写 Angular 应用程序时，您将拥有一个顶级模块，它是您的应用程序代码（没有模板）。

服务主要是控制器之间通信的一种方式，但您可以将一个服务注入另一个服务。服务通常用作访问数据存储的一种方式，人们将包装 Angular API，例如 ngResource。这种技术很有用，因为它使测试（尤其是模拟）变得非常容易。您可以拥有用于执行其他操作的服务，例如身份验证、日志记录等。

指令用于创建小部件或包装现有的东西，如 jquery 插件。包装现有插件可能是一个挑战，您这样做的原因是在插件和 Angular 之间建立双向数据绑定。如果您不需要双向数据绑定，则不需要包装它们。

指令也是进行 DOM 操作、捕获 DOM 事件等的地方。你不应该在控制器或服务中做与 DOM 相关的事情。创建指令会变得相当复杂。恕我直言，我建议首先查看 API 以获取可以执行您正在寻找的东西的东西，或者向 Angular 的 Google Group 寻求建议。

于 2012-06-27T00:00:42.927 回答