A melhor prática ao criar um software complexo é adotar um design modular. Funcionalidade que é abstraída e decomposta em módulos por meio de uma interface bem definida. Esta é a abordagem central da estrutura Angular.

Vamos dar uma olhada no mecanismo no núcleo do sistema Angular Dependency Injection.

A responsabilidade do Angular Injector é fornecer uma dependência configurada em componentes ou serviços que usam essa dependência. A razão pela qual é chamada de injeção é porque a associação entre uma dependência e o consumidor da dependência ocorre em tempo de execução.

Uma “injeção” é configurada por meio do token Injection , que faz parte da matriz de provedores Angular em um Componente ou Módulo. O mecanismo Injector que usa esse token de injeção cria uma instância do provedor e a injeta em um componente ou serviço para uso.

Um modelo OOP tradicional acaba com um código fortemente acoplado, o que aumenta a dívida técnica e os problemas de manutenção. Mas uma injeção de dependência resolve essas dependências em tempo real.

Quando o aplicativo inicializa, o Angular cria um injetor RootModule para a raiz de todos os módulos. A configuração do RootModule Injector torna-se parte da Árvore ModuleInjector e sua lista de dependências tem um impacto em todo o aplicativo.

O RootModule carrega o componente principal (AppComponent) e, como o Angular cria duas árvores injetoras diferentes para módulos e elementos (componentes e diretivas), o AppComponent torna-se o injetor raiz da árvore ElementInjector .

Angular criará componentes filhos e submódulos sob seus injetores de raiz respeitados.

Todas as dependências de um módulo ou componente são mencionadas na configuração “providers” do Injectable .

Registrar um provedor em um determinado nó da árvore definirá o escopo da dependência à medida que se torna disponível para todos os componentes filhos ou submódulos dentro de uma árvore de dependência. Isso significa que registrar um serviço na raiz da árvore o tornará disponível para todo o escopo sob o nó raiz.

O decorador @Injectable

Para tornar um serviço injetável , você deve decorá-lo com o decorator @Injectable() para indicar ao Angular que o serviço está disponível para injeção. Você também pode passar alguns argumentos para o decorador.

Por padrão, todos os outros decoradores em Angular (@Component & @Directive) são @Injectable e apenas as classes que não usam um decorador existente precisam usar @Injectable.

O decorador @Injectable tem uma importante propriedade “providedIn” que especifica onde fornecer a dependência. Usar a string 'root' aqui tornará o serviço disponível para todo o aplicativo.

Mas! Se você estiver projetando um aplicativo complexo, o uso de " fornecidoIn " é uma maneira preferencial de especificar a disponibilidade de um serviço em um módulo específico, pois permite a oscilação da árvore para o serviço.

Aqui está um exemplo:

Isso significa que o GetRandomUserService não será injetado na árvore do seu aplicativo se o seu aplicativo não tiver importado o SharedModuleModule .

Confira minha estrutura de código aberto QQ:

https://github.com/jsmuster/qq

Confira meus outros artigos

Explorando React com Javascript vanilla — parte 1 Compreendendo redutores desde o início Criando pintinhos com JavaScript

Por favor, dê um pouco de ao artigo e compartilhe!.

Codificação de nível

Obrigado por fazer parte da nossa comunidade! Antes de você ir:

• Bata palmas para a história e siga o autor
• Veja mais conteúdo na publicação Level Up Coding
• Curso de entrevista de codificação GRATUITO
• Siga-nos: Twitter | Linkedin | Boletim de Notícias