Injeção de Dependências

Basis Tecnologia da Informação S.A. - 2019

Injeção de Dependências

A Injeção de Dependência (DI) é uma maneira de criar objetos que dependem de outros objetos. Um sistema de injeção de dependência fornece os objetos dependentes quando cria uma instância de um objeto.

@Injectable

Antes de falar sobre as formas de DI primeiro temos de falar sobre o @Injectable.

O @Injectable() é um decorador essencial em todas as definições de serviço Angular, pois ele determina que o seu serviço poderá ser injetado.

Hierarquia de Injetores de dependencia

Serviços injetados tem visibilidade no escopo da hierarquia de sua definição, ou seja, um serviço injetor definido no nível da AppModule é compartilhado por todos os aplicativos em execução.

di hierarquia

Provedores de Dependência

Um provedor de dependência configura um injetor com um token DI, que esse injetor usa para fornecer a versão concreta em tempo de execução de um valor de dependência.

UseClass

O uso do useClass nos permite modifica o comportamento de uma classe

Exemplo

@Injectable()
export class Servico {
  sayHello() {
    console.log(`Servico --> Hello`);
  }
}
@Injectable()
export class Servico2 {
  sayHello() {
    console.log(`Servico2 --> Hello World`);
  }
}
@NgModule({
  providers: [
    {provider: Servico, useClass: Servico2}
  ]
})
export class MyModule { }

UseFactory

Com o useFactory, podemos usar uma fábrica em tempo de execução para decidir que tipo de serviço queremos devolver se for solicitado por qualquer outra classe em nossa aplicação.

Exemplo

@Injectable()
export class Servico { }
@Injectable()
export class Servico2 { }
@Injectable()
export class Servico3 { }
export function MyFactory() {
    constructor() {
        if (...) {
            return new Servico2();
        }
        return new Servico3();
    }
}
@NgModule({
  providers: [
    {provider: Servico, useFactory: MyFactory}
  ]
})
export class MyModule { }

Deps

Às vezes é necessário adicionar dependências as fábricas o classes, porque é necessário decidir se deve retornar servicoA ou servicoB. Para isso basta adicioná-las usando a propriedade deps no objeto de configuração.

Exemplo

@Injectable()
export class Servico { }
@Injectable()
export class Servico2 { }
@Injectable()
export class Servico3 { }
export function MyFactory() {
    constructor(http: HttpClient) {
        //logica com http
        if (...) {
            return new Servico2();
        }
        return new Servico3();
    }
}
@NgModule({
  providers: [
    {provider: Servico, useFactory: MyFactory, deps: [HttpClient]}
  ]
})
export class MyModule { }

UseValue

Nem sempre nossas dependências são classes, podem ocorrer ocasiões as quais sejam necessário a injeção de uma string, função ou objeto, e para isso devemos utilizar o parametro useValue

Exemplo

export const APP_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.application.com',
  title: 'Dependency Injection'
};
@NgModule({
  providers: [
    { provide: AppConfig, useValue: APP_DI_CONFIG })
  ]
})
export class MyModule { }

UseExisting

O useExisting é semelhante ao useClass mas nos permite que seja utilizada uma única instancia de uma dependência.

Exemplo

@Injectable()
export class Servico {
  sayHello() {
    console.log(`Servico --> Hello`);
  }
}
@Injectable()
export class Servico2 {
  sayHello() {
    console.log(`Servico2 --> Hello World`);
  }
}
@NgModule({
  providers: [
    {provider: Servico, useExisting: Servico2}
  ]
})
export class MyModule { }

Versão <6

Antes do lançamento do Angular 6, a única maneira de injetar dependências era especificar os serviços na propriedade providers do decorador @NgModule, @Component ou @Directive

Exemplo

import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
  constructor() { }
}
@NgModule({
    providers: [MyService]
})
export class MyModule { }

Versão >=6

Com o lançamento do Angular 6, temos uma nova forma de declaração de dependências chamada "Tree-shakable providers", e nós a usamos empregando a nova propriedade providedIn do decorador @Injectable.

Exemplo

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root', //Prove serviço para o escopo do AppModule
})
export class MyService {
  constructor() { }
}
@Injectable({
  providedIn: MyModule, //Prove serviço para o escopo de um módulo especifico
})
export class MyService {
  constructor() { }
}

providedIn

Podemos pensar em providedIn como uma dependência específica de maneira inversa. Ao vez de o módulo fornecer todos os seus serviços, agora é o próprio serviço que declara onde deve ser fornecido.

Injeção de Dependências com LazyLoad

lazy

Referencia

https://angular.io/

Bibliotecas

  • Node Sass

  • karma

  • Jasmine

  • JSON Server

  • Lodash

Node Sass

É um preprocessador de folhas de estilo que permite a compilação nativa de arquivos .scss para ganhos de desempenho.

karma

O Karma não é um framework de testes nem uma biblioteca de asserções. O Karma apenas inicia um servidor HTTP e gera o arquivo HTML do executor de teste.

Jasmine

O Jasmine é uma ferramenta de desenvolvimento orientada por comportamento para testar código JavaScript.

JSON Server

O JSON Server é uma ferramenta que simula uma API REST.

$ npm i json-server --save-dev
$ json-server --watch db.json

Lodash

O Lodash é uma biblioteca JavaScript, que visa facilitar o trabalho com matrizes, números, objetos, strings etc. Os métodos modulares de Lodash são ótimos para:

  • Iterar matrizes, objetos e strings

  • Manipular e testar valores

  • Criar funções compostas

Lodash Documentação

$ npm i -g npm
$ npm i --save lodash
import * as _ from 'lodash';

Exemplos

  • Trabalhando com arrays

  • Trabalhando com coleções

  • Funções e operações matemáticas

Componentes PrimeNG e Basis

  • PrimeNG

  • Generator Ultima

  • Componentes

PrimeNG

PrimeNG é uma coleção de componentes de UI para Angular. Todos os widgets são open source e gratuitos para uso sob licença MIT.

Comopenetes PrimeNG

Input

Button

Data

Panel

Overlay

File

Menu

Charts

Messages

Multimidia

DragDrop

Generator Ultima

É um gerador desenvolvido com o objetivo de fornecer uma aplicação básica Angular com um layout primeNG pré definido.

  • Instalação e uso

$ npm install -g yo
$ npm install -g generator-ultima --registry=http://element.basis.com.br/repository/npm-registry
$ yo ultima

Componente @nuvem/angular-base

Accessibility

Auxilia na acessibilidade das aplicações.

Hide While Login

Previne a exibição de elementos na interface enquanto o redirecionamento pro SSO estiver em andamento.

Security

Ferramentas pra auxiliar na segurança da aplicação.

Version Tag

Exibe o atributo version do arquivo package.json do sistema.

Error

Tratamento de erros comuns em requisições HTTP

Instalação

  • @nuvem/angular-base

$ npm install @nuvem/angular-base --save

Componente @nuvem/primeng-component

  • Datatable → Tabelas dinâmicas, com menu de ações customizável, em conformidade com as diretrizes de usabilidade Basis.

  • Page Notification → Mostra mensagens de operação na tela

  • Block UI → Bloqueia a tela durante requisições dos tipos POST, PUT, PATCH e DELETE.

Instalação

  • @nuvem/primeng-components

$ npm install @nuvem/primeng-components --save