服务、指令和模块有什么区别？

Question

我已经阅读了很多文档，但我越来越困惑。 我基本上无法弄清楚a之间的区别

• 服务
• 指令
• 模块

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

Answer 1

来自我自己的personal notes（主要来自文档、google 群组帖子和 SO 帖子的 sn-ps）：

模块

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

服务

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

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

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

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

Answer 2

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

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

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

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

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