blocks|key|3089449|text|可以将模块看作是连接许多其他东西的地方，例如指令、服务、常量等。模块可以注入到其他模块中，从而实现更高级别的重用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3089450|当编写一个angular应用程序时，你会有一个顶层模块，这是你的应用程序代码(没有模板)。|3089451|服务主要是控制器之间通信的一种方式，但您可以将一个服务注入到另一个服务中。服务通常被用作访问您的数据存储的一种方式，人们会包装angular+API，例如ngResource。这种技术非常有用，因为它使得测试(特别是mocking)变得非常容易。您可以使用服务来执行其他操作，如身份验证、日志记录等。|3089452|指令用于创建小部件或包装现有的东西，如jquery插件。包装现有的插件可能是一个挑战，你这样做的原因是为了在插件和angular之间建立一个双向数据绑定。如果您不需要双向数据绑定，那么就不需要包装它们。|3089453|指令也是进行DOM操作、捕获DOM事件等的地方。你不应该在控制器或服务中做与DOM相关的事情。创建指令可能会变得非常复杂。我建议你先看看API，看看能不能做你想做的事情，或者向Angular的Google+Group寻求建议。|3089454|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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. 

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.

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.

blocks|key|2875644|text|来自我自己的personal+notes+(主要是来自文档、谷歌群组帖子等帖子的片段)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2875645|模块|style|BOLD|2875646|2875647|提供了一种命名空间/组服务、指令、过滤器、配置信息和初始化代码的方法|unordered-list-item|2875648|帮助避免使用全局变量|2875649|来配置$injector，允许将模块(或整个模块本身)定义的内容注入到其他地方(依赖注入a模块与CommonJS或Require.js无关)。与AMD或Require.js模块相反，Angular模块不会尝试解决脚本加载顺序或懒惰脚本获取的问题。这些目标是正交的，两个模块系统可以并存并实现它们的目标(文档声称如此)。|2875650|2875651|服务|2875652|2875653|是单例的，因此您定义的每个服务只有一个实例。作为单例，它们不受作用域的影响，因此可以由多个视图/控制器/指令/其他服务访问(共享)当|2875654|两个或多个对象需要访问相同数据时(不使用根作用域)，或者您只想整洁地封装要与web服务器进行交互的data+|2875655|(在web服务器中扩展$resource或$http+)时，您可以(并且可能应该)创建自定义服务|2875656|2875657|2875658|​|2875659|2875660|内置服务以“$”开头。|2875661|要使用服务，需要对依赖项(例如，控制器、其他服务或指令)进行依赖项注入。|2875662|2875663|指令(下面的一些条目说的基本上是一样的，但我发现有时稍微不同的措辞会有很大帮助)|2875664|当模型的状态=教changes|2875665|extend新技巧时，|2875666|负责更新DOM。|2875667|2875668|2875669|Angular附带了一组内置的指令(例如ng-*+stuff)，这些指令对构建web应用程序很有用，但您可以添加自己的指令集，以便将HTML转换为声明性领域特定语言(DSL)。例如，Angular主页演示“创建组件”上的和元素。-不明显的内置指令(因为它们不是以“ng”开头的)：a，form，input，script，select，textarea。在Angular下，所有这些都比正常情况下做得更多！|2875670|2875671|HTML允许你“组件化”。指令通常比ng-include更好。例如，当你开始编写大量主要是数据绑定的超文本标记语言时，将超文本标记语言重构为(可重用的)+directives.|2875672|The+Angular编译器允许你将行为附加到任何超文本标记语言元素或属性，甚至创建具有自定义行为的新超文本标记语言元素或属性。Angular将这些行为扩展称为指令。|2875673|归根结底，指令只是一个函数，当Angular编译器在Angular中遇到它时，它就会执行|2875674|2875675|2875676|2875677|2875678|指令是由属性、元素名、类名或注释中的名称触发的行为或DOM转换。指令是在(+HTML+)编译过程中遇到特定HTML构造时应触发的行为。指令可以放在元素名、属性、类名和注释中。|2875679|大多数指令仅限于属性。例如，DoubleClick只使用自定义属性directives.|2875680|2875681|2875682|2875683|另请参阅What+is+an+angularjs+directive?+|2875684|2875685|2875686|在模块中定义和分组角度的东西(依赖注入的东西)。|2875687|共享数据并将web服务器交互封装在服务中。|2875688|在指令中扩展HTML和DOM操作。|2875689|并使控制器尽可能地“薄”。|2875690|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.google.com/document/d/12w4NKsix-kaZFu5Chha4HnIHzs5jhNiP2AcRoaVThyU/edit|1|https://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive/13898058#13898058^0|6|E|0|0|0|2|0|0|0|0|0|0|0|2|0|0|1|1|1|0|0|0|0|0|0|0|0|2|0|0|0|0|0|0|0|0|0|1|1|0|0|0|0|1|1|0|0|0|4|V|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2P|8|@]|9|@$A|2Q|B|2R|1|2S]]|C|$]]|$1|D|3|E|5|6|7|2T|8|@$A|2U|B|2V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|2W|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|2X|8|@]|9|@]|C|$]]|$1|L|3|M|5|K|7|2Y|8|@]|9|@]|C|$]]|$1|N|3|O|5|K|7|2Z|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|30|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|31|8|@$A|32|B|33|F|G]]|9|@]|C|$]]|$1|S|3|-4|5|6|7|34|8|@]|9|@]|C|$]]|$1|T|3|U|5|K|7|35|8|@]|9|@]|C|$]]|$1|V|3|W|5|K|7|36|8|@]|9|@]|C|$]]|$1|X|3|Y|5|K|7|37|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|38|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|39|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|3A|8|@]|9|@]|C|$]]|$1|13|3|-4|5|6|7|3B|8|@]|9|@]|C|$]]|$1|14|3|15|5|K|7|3C|8|@]|9|@]|C|$]]|$1|16|3|17|5|K|7|3D|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|3E|8|@]|9|@]|C|$]]|$1|19|3|1A|5|6|7|3F|8|@$A|3G|B|3H|F|G]]|9|@]|C|$]]|$1|1B|3|1C|5|6|7|3I|8|@]|9|@]|C|$]]|$1|1D|3|1E|5|K|7|3J|8|@]|9|@]|C|$]]|$1|1F|3|1G|5|K|7|3K|8|@]|9|@]|C|$]]|$1|1H|3|-4|5|6|7|3L|8|@]|9|@]|C|$]]|$1|1I|3|-4|5|6|7|3M|8|@]|9|@]|C|$]]|$1|1J|3|1K|5|6|7|3N|8|@]|9|@]|C|$]]|$1|1L|3|12|5|6|7|3O|8|@]|9|@]|C|$]]|$1|1M|3|1N|5|6|7|3P|8|@]|9|@]|C|$]]|$1|1O|3|1P|5|K|7|3Q|8|@]|9|@]|C|$]]|$1|1Q|3|1R|5|K|7|3R|8|@]|9|@]|C|$]]|$1|1S|3|-4|5|6|7|3S|8|@]|9|@]|C|$]]|$1|1T|3|-4|5|6|7|3T|8|@]|9|@]|C|$]]|$1|1U|3|12|5|6|7|3U|8|@]|9|@]|C|$]]|$1|1V|3|-4|5|6|7|3V|8|@]|9|@]|C|$]]|$1|1W|3|1X|5|K|7|3W|8|@]|9|@]|C|$]]|$1|1Y|3|1Z|5|K|7|3X|8|@]|9|@]|C|$]]|$1|20|3|-4|5|6|7|3Y|8|@]|9|@]|C|$]]|$1|21|3|-4|5|6|7|3Z|8|@]|9|@]|C|$]]|$1|22|3|12|5|6|7|40|8|@]|9|@]|C|$]]|$1|23|3|24|5|6|7|41|8|@]|9|@$A|42|B|43|1|44]]|C|$]]|$1|25|3|-4|5|K|7|45|8|@]|9|@]|C|$]]|$1|26|3|-4|5|6|7|46|8|@]|9|@]|C|$]]|$1|27|3|28|5|6|7|47|8|@]|9|@]|C|$]]|$1|29|3|2A|5|6|7|48|8|@]|9|@]|C|$]]|$1|2B|3|2C|5|6|7|49|8|@]|9|@]|C|$]]|$1|2D|3|2E|5|6|7|4A|8|@]|9|@]|C|$]]|$1|2F|3|-4|5|6|7|4B|8|@]|9|@]|C|$]]]|2G|$2H|$5|2I|2J|2K|C|$2L|2M]]|2N|$5|2I|2J|2K|C|$2L|2O]]]]

From my own <a href="https://docs.google.com/document/d/12w4NKsix-kaZFu5Chha4HnIHzs5jhNiP2AcRoaVThyU/edit" rel="noreferrer">personal notes</a> (mostly snippets from the docs, google group posts, and SO posts):

Modules

<ul>
<li>provide a way to namespace/group services, directives, filters, configuration information and initialization code</li>
<li>help avoid global variables</li>
<li>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)</li>
<li>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).</li>
</ul>

Services

<ul>
<li>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</li>
<li>You can (and probably should) create custom services when

<ul>
<li>two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data</li>
<li>you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)</li>
</ul></li>
<li>Built-in services start with '$'.</li>
<li>To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive). </li>
</ul>

Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot)

<ul>
<li>are responsible for updating the DOM when the state of the model changes</li>
<li>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 &lt;tabs> and &lt;pane> elements on the Angular home page demo "Creating Components".

<ul>
<li>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!</li>
</ul></li>
<li>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.</li>
<li>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.

<ul>
<li>When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.</li>
</ul></li>
<li>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. 

<ul>
<li>Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.</li>
</ul></li>
<li>see also <a href="https://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive/13898058#13898058">What is an angularjs directive?</a></li>
</ul>

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.

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 

<ul>
<li>service</li>
<li>directive </li>
<li>module</li>
</ul>

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?

What is the difference between service, directive and module?

身份验证

数据存储

服务器

编译器

我已经阅读了很多文档，我越来越困惑。我基本上搞不清楚servicedirective module我看到了很多自定义组件。有时他们使用指令，有时使用服务。它总是以模块开头。有没有人能举例说明这三种类型之间的区别？

问服务、指令和模块的区别是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问服务、指令和模块的区别是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问服务、指令和模块的区别是什么？
EN