I have been reading a lot of docs, and I'm getting more and more confused. I basically can't figure out the difference between a
我读了很多文档，我越来越困惑。我基本上不能算出a的差
- service
- 服务
- directive
- 指令
- module
- 模块
I see a lot of custom components. Sometimes they're using directives, sometimes services. It always starts with a module. Can someone explain with an example what the difference is between these three types?
我看到很多定制组件。有时他们使用指令，有时使用服务。它总是以一个模块开始。有人能举例说明这三种类型的区别吗?
2 个解决方案
#1
115
Think of a module as being a place to wire up a number of other things, such as directives, services, constants etc. Modules can be injected into other modules giving you a high level of reuse.
可以将模块想象成连接许多其他东西的地方，比如指令、服务、常量等等。模块可以被注入到其他模块中，从而使您具有高度的重用性。
When writing an angular app, you would have a top-level module which is your application code (without templates).
在编写一个角应用程序时，您将拥有一个*模块，它是您的应用程序代码(没有模板)。
Services are mainly a way to communicate between controllers, but you can inject one service into another. Services are often used as a way to get to your data stores and people will wrap the angular APIs, such as ngResource. This technique is useful since it makes testing (particularly mocking) quite easy. You can have services for doing other things like authentication, logging etc.
服务主要是控制器之间通信的一种方式，但是您可以将一个服务注入另一个服务。服务通常被用来作为访问数据存储的一种方式，人们将打包角化的api，比如ngResource。这种技术非常有用，因为它使测试(尤其是mock)非常容易。您可以使用服务进行其他工作，如身份验证、日志记录等。
Directives are used for creating widgets or wrapping existing things like jquery plugins. Wrapping existing plugins can be a challenge and the reason you would do this is to establish a two-way data binding between the plugins and angular. If you don't need two-way data binding then you don't need to wrap them.
指令用于创建小部件或封装现有的jquery插件。包装现有的插件是一个挑战，您这样做的原因是在插件和角度之间建立一个双向数据绑定。如果您不需要双向数据绑定，那么您就不需要包装它们。
A directive is also a place for doing DOM manipulation, catching DOM-events etc. You should not be doing DOM-related stuff in controllers or services. Creating directives can get pretty complex. IMHO, I recommend first looking at API for something that can do what you are looking for OR ask Angular's Google Group for advice.
指令也是执行DOM操作、捕获DOM事件等的地方。您不应该在控制器或服务中执行与DOM相关的工作。创建指令会变得非常复杂。IMHO，我建议先看看API，看看它能做你想做的事情，或者向angle的谷歌组寻求建议。
#2
215
From my own personal notes (mostly snippets from the docs, google group posts, and SO posts):
从我的个人笔记中(大部分是来自文档、谷歌群组的文章，等等):
Modules
模块
- provide a way to namespace/group services, directives, filters, configuration information and initialization code
- 提供命名空间/组服务、指令、过滤器、配置信息和初始化代码的方法
- help avoid global variables
- 帮助避免全局变量
- are used to configure the $injector, allowing the things defined by the module (or the whole module itself) to be injected elsewhere (Dependency Injection stuff)
- 用于配置$injector，允许模块(或整个模块本身)定义的东西被注入到其他地方(依赖注入内容)
- Angular modules are not related to CommonJS or Require.js. As opposed to AMD or Require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfill their goals (so the docs claim).
- 角模块与CommonJS或request .js无关。与AMD或要求相反。js模块，角化模块不尝试解决脚本加载顺序或延迟脚本抓取的问题。这些目标都是正交的，两个模块系统可以并排共存并实现它们的目标(因此文档声明)。
Services
服务
- are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
- 是单例，因此您定义的每个服务只有一个实例。作为单例，它们不受范围的影响，因此可以通过(与)多个视图/控制器/指令/其他服务进行(共享)访问
- You can (and probably should) create custom services when
- two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data
- 两个或更多的东西需要访问相同的数据(不要使用根作用域)，或者你只是想要把你的数据整齐地封装起来。
- you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
- 您希望封装与web服务器的交互(在服务中扩展$resource或$http)
- 当两个或两个以上的东西需要访问相同的数据(不使用根范围)时，您可以(可能也应该)创建自定义服务，或者您只是想要简洁地封装与web服务器(在服务中扩展$resource或$http)的交互)
- Built-in services start with '$'.
- 内置服务以“$”开头。
- To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).
- 要使用服务，依赖项注入需要依赖项(例如，对控制器、另一个服务或指令)。
Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)
指示(下面的一些条目基本上说的是同一件事，但我发现有时候稍微有些不同的措辞会有很大帮助)
- are responsible for updating the DOM when the state of the model changes
- 当模型的状态发生变化时，是否负责更新DOM
- extend HTML vocabulary = teach HTML new tricks.
Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the <tabs> and <pane> elements on the Angular home page demo "Creating Components".- Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
- 不明显的内置指令(因为它们不以“ng”开头):a、表单、输入、脚本、select、textarea。在角度下，这些都比平时做得多!
-
扩展HTML词汇表=教HTML新的技巧。angle附带一组内置的指令(例如，ng-*之类)，它们对于构建web应用程序非常有用，但是您可以添加自己的指令，以便将HTML转换为声明性领域特定语言(DSL)。例如，在“创建组件”的角度主页演示中，
和 元素。不明显的内置指令(因为它们不以“ng”开头):a、表单、输入、脚本、select、textarea。在角度下，这些都比平时做得多! - Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
- 指令允许您“组件化HTML”。指令通常比ng-include要好。例如，当您开始编写大量带有数据绑定的HTML时，将HTML重构为(可重用的)指令。
- The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
- When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
- 当你把它归结为一个整体时，指令就是一个函数，当有角的编译器在DOM中遇到它时执行。
- 角编译器允许您将行为附加到任何HTML元素或属性，甚至使用自定义行为创建新的HTML元素或属性。角调用这些行为扩展指令。当你把它归结为一个整体时，指令就是一个函数，当有角的编译器在DOM中遇到它时执行。
- A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
- Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.
- 大多数指令仅限于属性。DoubleClick只使用自定义属性指令。
- 指令是由属性、元素名、类名或注释中的名称触发的行为或DOM转换。指令是在(HTML)编译过程中遇到特定的HTML构造时应该触发的行为。这些指令可以放在元素名、属性、类名以及注释中。大多数指令仅限于属性。DoubleClick只使用自定义属性指令。
- see also What is an angularjs directive?
- 看什么是angularjs指令?
Define and group Angular things (dependency injection stuff) in modules.
Share data and wrap web server interaction in services.
Extend HTML and do DOM manipulation in directives.
And make Controllers as "thin" as possible.
在模块中定义和组角的东西(依赖注入的东西)。共享数据并在服务中包装web服务器交互。扩展HTML并在指令中执行DOM操作。使控制器尽可能“薄”。
#1
115
Think of a module as being a place to wire up a number of other things, such as directives, services, constants etc. Modules can be injected into other modules giving you a high level of reuse.
可以将模块想象成连接许多其他东西的地方，比如指令、服务、常量等等。模块可以被注入到其他模块中，从而使您具有高度的重用性。
When writing an angular app, you would have a top-level module which is your application code (without templates).
在编写一个角应用程序时，您将拥有一个*模块，它是您的应用程序代码(没有模板)。
Services are mainly a way to communicate between controllers, but you can inject one service into another. Services are often used as a way to get to your data stores and people will wrap the angular APIs, such as ngResource. This technique is useful since it makes testing (particularly mocking) quite easy. You can have services for doing other things like authentication, logging etc.
服务主要是控制器之间通信的一种方式，但是您可以将一个服务注入另一个服务。服务通常被用来作为访问数据存储的一种方式，人们将打包角化的api，比如ngResource。这种技术非常有用，因为它使测试(尤其是mock)非常容易。您可以使用服务进行其他工作，如身份验证、日志记录等。
Directives are used for creating widgets or wrapping existing things like jquery plugins. Wrapping existing plugins can be a challenge and the reason you would do this is to establish a two-way data binding between the plugins and angular. If you don't need two-way data binding then you don't need to wrap them.
指令用于创建小部件或封装现有的jquery插件。包装现有的插件是一个挑战，您这样做的原因是在插件和角度之间建立一个双向数据绑定。如果您不需要双向数据绑定，那么您就不需要包装它们。
A directive is also a place for doing DOM manipulation, catching DOM-events etc. You should not be doing DOM-related stuff in controllers or services. Creating directives can get pretty complex. IMHO, I recommend first looking at API for something that can do what you are looking for OR ask Angular's Google Group for advice.
指令也是执行DOM操作、捕获DOM事件等的地方。您不应该在控制器或服务中执行与DOM相关的工作。创建指令会变得非常复杂。IMHO，我建议先看看API，看看它能做你想做的事情，或者向angle的谷歌组寻求建议。
#2
215
From my own personal notes (mostly snippets from the docs, google group posts, and SO posts):
从我的个人笔记中(大部分是来自文档、谷歌群组的文章，等等):
Modules
模块
- provide a way to namespace/group services, directives, filters, configuration information and initialization code
- 提供命名空间/组服务、指令、过滤器、配置信息和初始化代码的方法
- help avoid global variables
- 帮助避免全局变量
- are used to configure the $injector, allowing the things defined by the module (or the whole module itself) to be injected elsewhere (Dependency Injection stuff)
- 用于配置$injector，允许模块(或整个模块本身)定义的东西被注入到其他地方(依赖注入内容)
- Angular modules are not related to CommonJS or Require.js. As opposed to AMD or Require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfill their goals (so the docs claim).
- 角模块与CommonJS或request .js无关。与AMD或要求相反。js模块，角化模块不尝试解决脚本加载顺序或延迟脚本抓取的问题。这些目标都是正交的，两个模块系统可以并排共存并实现它们的目标(因此文档声明)。
Services
服务
- are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
- 是单例，因此您定义的每个服务只有一个实例。作为单例，它们不受范围的影响，因此可以通过(与)多个视图/控制器/指令/其他服务进行(共享)访问
- You can (and probably should) create custom services when
- two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data
- 两个或更多的东西需要访问相同的数据(不要使用根作用域)，或者你只是想要把你的数据整齐地封装起来。
- you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
- 您希望封装与web服务器的交互(在服务中扩展$resource或$http)
- 当两个或两个以上的东西需要访问相同的数据(不使用根范围)时，您可以(可能也应该)创建自定义服务，或者您只是想要简洁地封装与web服务器(在服务中扩展$resource或$http)的交互)
- Built-in services start with '$'.
- 内置服务以“$”开头。
- To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).
- 要使用服务，依赖项注入需要依赖项(例如，对控制器、另一个服务或指令)。
Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)
指示(下面的一些条目基本上说的是同一件事，但我发现有时候稍微有些不同的措辞会有很大帮助)
- are responsible for updating the DOM when the state of the model changes
- 当模型的状态发生变化时，是否负责更新DOM
- extend HTML vocabulary = teach HTML new tricks.
Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the <tabs> and <pane> elements on the Angular home page demo "Creating Components".- Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
- 不明显的内置指令(因为它们不以“ng”开头):a、表单、输入、脚本、select、textarea。在角度下，这些都比平时做得多!
-
扩展HTML词汇表=教HTML新的技巧。angle附带一组内置的指令(例如，ng-*之类)，它们对于构建web应用程序非常有用，但是您可以添加自己的指令，以便将HTML转换为声明性领域特定语言(DSL)。例如，在“创建组件”的角度主页演示中，
和 元素。不明显的内置指令(因为它们不以“ng”开头):a、表单、输入、脚本、select、textarea。在角度下，这些都比平时做得多! - Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
- 指令允许您“组件化HTML”。指令通常比ng-include要好。例如，当您开始编写大量带有数据绑定的HTML时，将HTML重构为(可重用的)指令。
- The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
- When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
- 当你把它归结为一个整体时，指令就是一个函数，当有角的编译器在DOM中遇到它时执行。
- 角编译器允许您将行为附加到任何HTML元素或属性，甚至使用自定义行为创建新的HTML元素或属性。角调用这些行为扩展指令。当你把它归结为一个整体时，指令就是一个函数，当有角的编译器在DOM中遇到它时执行。
- A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
- Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.
- 大多数指令仅限于属性。DoubleClick只使用自定义属性指令。
- 指令是由属性、元素名、类名或注释中的名称触发的行为或DOM转换。指令是在(HTML)编译过程中遇到特定的HTML构造时应该触发的行为。这些指令可以放在元素名、属性、类名以及注释中。大多数指令仅限于属性。DoubleClick只使用自定义属性指令。
- see also What is an angularjs directive?
- 看什么是angularjs指令?
Define and group Angular things (dependency injection stuff) in modules.
Share data and wrap web server interaction in services.
Extend HTML and do DOM manipulation in directives.
And make Controllers as "thin" as possible.
在模块中定义和组角的东西(依赖注入的东西)。共享数据并在服务中包装web服务器交互。扩展HTML并在指令中执行DOM操作。使控制器尽可能“薄”。