Angular 2 - Cadastro de Clientes - IX


 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

Neste artigo (veja o artigo anterior aqui) vamos criar um serviço que vai tratar os dados e que poderá ser reutilizado por qualquer componente da aplicação.

Até o momento a lista de clientes esta sendo disponibilizada apenas no componente clientes-lista.component.ts onde definimos o array de clientes. Dessa forma, não temos acesso aos dados dos clientes nos outros componentes e precisamos assim criar um serviço e tornar o acesso aos dados disponíveis para qualquer componente da aplicação.

Um serviço no Angular 2 pode ser definido como um Componente que contém lógica de negócio específica para um domínio, e que pode ser injetado e utilizado por outros componentes.

A criação de um serviço segue o mesmo padrão de criação de um componente, com a diferença que ele será marcado com a anotação Injectable ao invés de Component. A principal diferença é que a anotação Injectable permite que um componente seja injetado e utilizado por outros componentes.

Depois que você criar um serviço no Angular 2 você tem que importá-lo no Componente no qual deseja usar o serviço e deve referenciá-lo no metadata da anotação Component usando o atributo providers.

Criando um serviço reutilizável

Vamos definir uma classe ClienteService e remover o acesso que estamos fazendo nos dados dos clientes no componente  clientes-lista.component.ts para o serviço que vamos criar.

Selecione a pasta clientes e crie o arquivo cliente.service.ts e a seguir inclua o código abaixo neste arquivo:

import { Injectable } from '@angular/core';
import { Cliente } from './cliente.model';
import { CLIENTES } from './clientes-mock';
@Injectable()
export class ClienteService{
    getClientes() : Cliente[]  {
        return CLIENTES;
    }
}

O que foi feito neste código ?

Importamos as referências a nossa classe Cliente e ao nosso array CLIENTES para poder ter acesso aos dados dos clientes.

Decoramos a classe ClienteService com o atributo Injectable() que emite metadados para o Angular 2 de forma que ele possa identificar as dependências de ClienteService e fazer a injeção dessas dependências corretamente. (No nosso exemplo não temos nenhuma dependência)

Definimos o método GetClientes() que retorna uma lista de clientes.

Feito isso vamos abrir o arquivo clientes-lista.component.ts e alterar o código deste arquivo conforme a seguir:

import {Component, OnInit} from '@angular/core';
import { Cliente } from './cliente.model';
import { ClienteService} from './cliente.service';
@Component({
    moduleId: module.id,
    selector : 'clientes-lista',
    templateUrl: 'clientes-lista.component.html'
})
export class ClientesListaComponent implements OnInit {
    
    clientes : Cliente[] ;
    constructor(private clienteService : ClienteService){}
    ngOnInit() : void {
        this.clientes = this.clienteService.getClientes();
     }
}

Neste código estamos importando o ClienteService e definindo no construtor da classe ClienteLista do componente uma referência ao nosso serviço que será injetada via atributo Injectable().

Como não é uma boa prática fazer uma chamada a um serviço em um construtor, estamos usando o ciclo de vida ngOnInit do componente para chamar o método getClientes do serviço que criamos.

Para poder usar esse ciclo de vida estamos implementando a interface OnInit (isso não é obrigatório mas é uma boa prática) e por isso tivemos que importá-la.

Muito bem...

Mas até o momento não temos um provedor para o serviço ClienteService, e, embora tenhamos injetado a dependência do serviço no construtor do componente, não temos ainda nenhuma instância do serviço para ser utilizada. Por isso temos que fornecer essa instância usando a diretiva providers.

Podemos definir a instância do serviço usando providers em um componente ou em um módulo.

Para tornar o serviço disponível para os componentes da aplicação vamos definir a instância do serviço no arquivo clientes.modules.ts.

Abra esse arquivo e altere o seu código conforme mostrado a seguir (linhas azuis):

import { ClienteRoutingModule } from './cliente-routing.module';
import { ClienteService } from './cliente.service';
@NgModule({ 
    imports : [ 
        CommonModule,
        ClienteRoutingModule       
    ],
     declarations : [
         ClientesListaComponent,
         ClienteDetalheComponent
     ],
     exports : [ ClientesListaComponent],
     providers: [
         ClienteService
     ]
})
export class ClientesModule {}

 

Agora todos os componentes deste módulo tem acesso ao serviço criado.

Ao testar a nossa aplicação agora ela ainda não vai mostrar as informações do cliente selecionado na páginas pois apenas fizemos um ajuste no acesso aos dados.

A aplicação no entanto deverá apresentar as páginas sem nenhum erro.

No próximo artigo vou mostrar como podemos fazer chamadas assíncronas usando Promise.

(Jesus) Veio para o que era seu, e os seus não o receberam.
Mas, a todos quantos o receberam, deu-lhes o poder de serem feitos filhos de Deus, aos que crêem no seu nome;
Os quais não nasceram do sangue, nem da vontade da carne, nem da vontade do homem, mas de Deus.

João 1:11-13

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti