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

Posted 2023-02-22

【中文标题】服务、指令和模块有啥区别？

【英文标题】：What is the difference between service, directive and module?服务、指令和模块有什么区别？

【发布时间】：2012-06-25 16:07:56

【问题描述】：

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

服务 指令 模块

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

【参考方案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 操作。 并使控制器尽可能“瘦”。

【讨论】：

@Mark Rajcok - 很好的答案，我已经给了你+1，但是在模块下澄清更多第3项会很棒，即“配置$injector”人们了解注入服务，但这是如何做到的与模块有关？

@LeeWhitney，参见docs.angularjs.org/guide/module#dependencies：“模块可以列出其他模块作为它们的依赖项。依赖一个模块意味着需要在加载所需模块之前加载所需模块。换句话说，配置所需模块的块在所需模块的配置块之前执行。"

@MarkRajcok 链接现已损坏

【参考方案2】：

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

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

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

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

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