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:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
Curso Fundamentos da Programação Orientada a Objetos com VB .NET
NET - Criando um livro de contatos usando o AngularJS - Macoratti
NET - AngularJS : Apresentação (início do curso) - Macoratti
ASP .NET MVC - Crud com Entity Framework e AngularJS - Macoratti
AngularJS - Conceitos Básicos - YouTube (série de 13 vídeo aulas sobre o Angular)
NET - O que é TypeScript e quais os seus benefícios - Macoratti
TypeScript - Configurando o VS Community 2015 para ... - Macoratti
Visual Studio - Bem-Vindo Node.js : desenvolvendo para Node.js na plataforma .NET