Qual é a diferença entre serviço, diretiva e módulo?

Eu tenho lido muitos documentos e estou ficando cada vez mais confuso. Eu basicamente não consigo descobrir a diferença entre um

  • serviço
  • diretiva
  • módulo

Eu vejo muitos componentes personalizados. Às vezes eles estão usando diretivas, às vezes serviços. Sempre começa com um módulo. Alguém pode explicar com um exemplo qual a diferença entre esses três tipos?

De minhas próprias annotations pessoais (principalmente snippets dos documentos, postagens do grupo do Google e mensagens do SO):

Módulos

  • fornecer uma maneira de nomear / agrupar serviços, diretivas, filtros, informações de configuração e código de boot
  • ajudar a evitar variables ​​globais
  • são usados ​​para configurar o $ injector, permitindo que as coisas definidas pelo módulo (ou o próprio módulo inteiro) sejam injetadas em outro lugar (material de Injeção de Dependência)
  • Módulos angulares não estão relacionados ao CommonJS ou ao Require.js. Ao contrário dos módulos AMD ou Require.js, os módulos Angular não tentam resolver o problema de ordenação de carregamento de scripts ou busca de scripts preguiçosos. Esses objectives são ortogonais e ambos os sistemas de módulo podem viver lado a lado e cumprir seus objectives (assim os documentos alegam).

Serviços

  • são singletons, portanto, há apenas uma instância de cada serviço que você define. Como singletons, eles não são afetados por escopos e, portanto, podem ser acessados ​​por (compartilhados com) várias visões / controladores / diretivas / outros serviços
  • Você pode (e provavelmente deve) criar serviços personalizados quando
    • duas ou mais coisas precisam de access aos mesmos dados (não use o escopo raiz) ou você simplesmente deseja encapsular seus dados
    • você deseja encapsular interações com, digamos, um servidor web (estender $ resource ou $ http em seu serviço)
  • Os serviços internos começam com ‘$’.
  • Para usar um serviço, a injeção de dependência é necessária no dependente (por exemplo, no controlador, ou outro serviço ou uma diretiva).

Diretivas (alguns dos itens abaixo dizem essencialmente a mesma coisa, mas descobri que, às vezes, um texto ligeiramente diferente ajuda bastante)

  • são responsáveis ​​por atualizar o DOM quando o estado do modelo é alterado
  • estender o vocabulário HTML = ensinar novos truques em HTML.
    Angular vem com um conjunto de diretivas (por exemplo, ng- * stuff) que são úteis para construir aplicações web, mas você pode adicionar o seu próprio tal que o HTML pode ser transformado em uma DSL (Domain Specific Language) declarativa. Por exemplo, os elementos e na demonstração da home page angular “Criando componentes”.
    • Directivas incorporadas não óbvias (porque não começam com “ng”): a, formulário, input, script, select, textarea. Sob Angular, tudo isso faz mais do que o normal!
  • Diretivas permitem “componentizar HTML”. As diretivas geralmente são melhores que ng-include. Por exemplo, quando você começa a escrever lotes de HTML principalmente com vinculação de dados, refaça esse HTML em diretivas (reutilizáveis).
  • O compilador Angular permite append comportamento a qualquer elemento ou atributo HTML e até mesmo criar novos elementos ou atributos HTML com comportamento personalizado. Angular chama essas diretivas de extensões de comportamento.
    • Quando você resume tudo, uma diretiva é apenas uma function que é executada quando o compilador Angular a encontra no DOM.
  • Uma diretiva é um comportamento ou uma transformação DOM que é acionada pela presença de um atributo, um nome de elemento, um nome de class ou um nome em um comentário. A diretiva é um comportamento que deve ser acionado quando construções HTML específicas são encontradas no processo de compilation (HTML). As diretivas podem ser colocadas em nomes de elementos, atributos, nomes de classs e comentários.
    • A maioria das diretivas restringe-se apenas ao atributo. Por exemplo, o DoubleClick usa apenas diretivas de atributo personalizadas.
  • veja também O que é uma diretiva angularjs?

Definir e agrupar coisas angulares (coisas de injeção de dependência) em módulos.
Compartilhe dados e envolva a interação do servidor da Web nos serviços.
Estenda o HTML e faça a manipulação do DOM nas diretivas.
E torne os Controladores tão “finos” quanto possível.