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




set page title in angular 6 (2)

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 anotações 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 inicialização
  • ajudar a evitar variáveis ​​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. Essas metas são ortogonais e ambos os sistemas de módulo podem viver lado a lado e cumprir seus objetivos (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 acesso 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.
    O Angular vem com um conjunto de diretivas (por exemplo, ng- * stuff) que são úteis para construir aplicativos da web, mas você pode adicionar o seu próprio de forma que o HTML possa ser transformado em uma DSL (Domain Specific Language) declarativa. Por exemplo, os elementos <tabs> e <pane> na demo inicial da página inicial "Criando Componentes".
    • Diretivas internas não óbvias (porque elas não começam com "ng"): a, formulário, entrada, 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 com principalmente vinculação de dados, refaça esse HTML em diretivas (reutilizáveis).
  • O compilador Angular permite anexar 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 função 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 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 restringe-se apenas ao atributo. Por exemplo, o DoubleClick usa apenas diretivas de atributos personalizados.
  • veja também O que é uma diretiva angularjs?

Defina e agrupe coisas Angulares (coisas de injeção de dependência) em módulos.
Compartilhe dados e envolva a interação com servidores da Web em 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.


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, oferecendo 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 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 armazenamentos de dados, e as pessoas envolvem as APIs angulares, como ngResource. Essa técnica é útil, pois torna o teste (especialmente o escarnecimento) bastante fácil. Você pode ter serviços para fazer outras coisas como autenticação, registro etc.

As diretivas são usadas para criar widgets ou agrupar itens existentes, como plugins jquery. Encapsular plugins existentes pode ser um desafio e a razão pela qual você faria isso seria estabelecer uma ligação de dados bidirecional entre os plugins e o angular. Se você não precisa de vinculação de dados bidirecional, não é necessário envolvê-los.

Uma diretiva também é um local para manipular DOM, capturar eventos DOM etc. Você não deveria estar fazendo coisas relacionadas a DOM em controladores ou serviços. Criar diretivas pode ficar bastante complexo. IMHO, eu recomendo primeiro olhar para a API para algo que pode fazer o que você está procurando OU pedir conselho do Angular do Google Group.





angularjs