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

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

• serviço
• diretiva
• módulo

Eu vejo muitos componentes personalizados. Às vezes, eles usam 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?

Pense em um módulo como um local para conectar várias outras coisas, como diretivas, serviços, constantes etc. Os módulos podem ser injetados em outros módulos, proporcionando um alto nível de reutilização.

Ao escrever um aplicativo angular, você teria um módulo de nível superior, que é o código do seu aplicativo (sem modelos).

Os serviços são principalmente uma maneira de se comunicar entre controladores, mas você pode injetar um serviço em outro. Os serviços costumam ser usados ​​como uma maneira de acessar seus repositórios de dados e as pessoas agrupam as APIs angulares, como ngResource. Essa técnica é útil, pois facilita bastante o teste (principalmente a zombaria). Você pode ter serviços para fazer outras coisas, como autenticação, log etc.

As diretivas são usadas para criar widgets ou agrupar coisas existentes, como plugins jquery. O agrupamento de plug-ins existentes pode ser um desafio, e o motivo para você fazer isso é estabelecer uma ligação de dados bidirecional entre os plug-ins e o angular. Se você não precisar de ligação de dados bidirecional, não precisará agrupá-los.

Uma diretiva também é um local para a manipulação do DOM, captura de eventos do DOM, etc. Você não deve fazer coisas relacionadas ao DOM nos controladores ou serviços. Criar diretivas pode ficar bastante complexo. IMHO, recomendo primeiro procurar na API algo que possa fazer o que você está procurando OU pedir conselhos ao Grupo do Google da Angular.

Das minhas próprias anotações pessoais (principalmente trechos de documentos, postagens de grupos do Google e postagens SO):

Módulos

• fornecer uma maneira de serviços de namespace / grupo, diretivas, filtros, informações de configuração e código de inicialização
• ajudar a evitar variáveis ​​globais
• são usados ​​para configurar o injetor $, permitindo que as coisas definidas pelo módulo (ou o próprio módulo inteiro) sejam injetadas em outro local (material de injeção de dependência)
• Módulos angulares não estão relacionados ao CommonJS ou Require.js. Ao contrário dos módulos AMD ou Require.js, os módulos Angular não tentam resolver o problema de pedidos de carregamento de scripts ou busca lenta de scripts. Esses objetivos são ortogonais e os dois sistemas de módulos podem viver lado a lado e cumprir seus objetivos (de acordo com os documentos).

Serviços

• são singletons, portanto, há apenas uma instância de cada serviço definido por você. Como singletons, eles não são afetados por escopos e, portanto, podem ser acessados ​​por (compartilhados com) várias visualizações / controladores / diretivas / outros serviços
• Você pode (e provavelmente deveria) criar serviços personalizados quando
  • duas ou mais coisas precisam acessar os mesmos dados (não use o escopo raiz) ou você apenas deseja encapsular seus dados ordenadamente
  • você deseja encapsular interações com, por exemplo, um servidor Web (estenda $ 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 em outro serviço ou em uma diretiva).

Diretivas (alguns dos itens abaixo dizem essencialmente a mesma coisa, mas descobri que algumas vezes um texto um pouco diferente ajuda muito)

• são responsáveis ​​por atualizar o DOM quando o estado do modelo for alterado
• estender o vocabulário HTML = ensinar novos truques em HTML.
  O Angular é fornecido com um conjunto de diretivas incorporado (por exemplo, ng- * stuff) que são úteis para a criação de aplicativos da Web, mas você pode adicionar os seus próprios, para que o HTML possa ser transformado em uma DSL (Domain Specific Language) declarativa. Por exemplo, os elementos <tabs> e <pane> na demonstração da página inicial Angular "Criando componentes".
  • Diretivas internas não óbvias (porque elas não começam com "ng"): a, formulário, entrada, script, seleção, área de texto. Sob Angular, tudo isso faz mais do que o normal!
• As diretivas permitem "componente HTML". As diretivas geralmente são melhores que o ng-include. Por exemplo, quando você começar a escrever muito HTML principalmente com ligação de dados, refatore esse HTML em diretivas (reutilizáveis).
• O compilador Angular permite anexar o comportamento a qualquer elemento ou atributo HTML e até criar novos elementos ou atributos HTML com comportamento personalizado. Angular chama essas diretivas de extensões de comportamento .
  • Quando você reduz tudo, uma diretiva é apenas uma função que é executada quando o compilador Angular encontra-a no DOM.
• Uma diretiva é um comportamento ou transformação DOM que é acionada pela presença de um atributo, um nome de elemento, um nome de classe ou um nome em um comentário. Diretiva é um comportamento que deve ser acionado quando construções HTML específicas são encontradas no processo de compilação (HTML). As diretivas podem ser colocadas em nomes de elementos, atributos, nomes de classes e comentários.
  • A maioria das diretivas é restrita 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 (itens de injeção de dependência) em módulos.
Compartilhe dados e agrupe 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 o mais "fino" possível.