Angular
7 - Consumindo Web API ASP .NET MVC - II
 |
Hoje veremos como consumir uma Web API ASP .NET MVC 5 em uma aplicação Angular 7. |
Continuando a primeira parte do artigo vamos criar a aplicação Angular usando o Angular CLI 7.0 e o Angular Material.
|
|
|
Criando um aplicação Angular
Vamos usar o Angular CLI e o Angular Material para criar nossa aplicação Angular que vai consumir a WEB API e realizar as operações CRUD.
Nota: Para verificar a versão do seu Angular CLI digite: ng --version
O comando : npm install -g @angular/cli instala o Angular CLI.
|
Vamos criar a aplicação angular na mesma pasta onde criamos a aplicação Web API.
Abra uma prompt de comandos e digite o comando : ng new clientesApp
Será criado um projeto Angular na pasta clientesApp. Vamos entrar na pasta digitando: cd clientesApp
A seguir digite o comando : code .
Isso vai abrir o projeto no Visual Studio Code:
 |
O
arquivo package.json é onde ficam as
dependências do projeto Na pasta src temos a pasta app onde estão os componentes da aplicação O arquivo tsconfig.json é o arquivo de configuração TypeScript; |
Dentro da pasta src temos a pasta app onde vamos criar os componentes da nossa aplicação.
 |
Na
pasta app temos o arquivo app.component.ts
que contém a classe Component chamada de
AppComponent onde definimos o que vamos
exibir ao usuário.
Um componente é um recurso utilizado para criar uma classe responsável por controlar e manter o estado de uma view. O arquivo app.component.html é onde vamos exibir a nossa aplicação. O arquivo app.module.ts contém a classe AppModule é responsável por expor para a aplicação algum código específico, que pode ser uma classe, uma função, ou mesmo uma constante. |
Vamos criar um componente Cliente em nosso projeto Angular.
Estando na pasta do projeto angular digite o comando : ng g c cliente
 |
Este
comando vai criar a pasta cliente dentro da pasta app. Dentro da pasta cliente serão criados os arquivos:
Além de criar estes arquivos o Angular CLI atualiza o arquivo app.module.ts com as referências aos componentes criados. |
Agora, ainda estando na pasta do projeto, vamos criar um serviço na raiz da pasta app.
Para isso digite o comando: ng g s cliente
A seguir vamos criar a classe Cliente na raiz da pasta app.
Para isso digite o comando : ng g class cliente
Ao final teremos na pasta app e na pasta cliente os seguintes arquivos criados:
 |
O
arquivo cliente.service.ts é onde vamos
definir o serviço que vai acessar a nossa Web API O arquivo cliente.ts é onde vamos definir a classe Cliente. |
Vamos então abrir o arquivo cliente.ts e incluir o código abaixo neste arquivo:
export class Cliente {
Id: string;
Nome: string;
Email: string;
Telefone: string;
Endereco: string;
Cidade: string;
}
|
A seguir vamos abrir o arquivo cliente.service.ts e definir o código a seguir:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Cliente } from './cliente';
var httpOptions = {headers: new HttpHeaders({"Content-Type": "application/json"})};
@Injectable({
providedIn: 'root'
})
export class ClienteService {
url = 'http://localhost:16434/api/clientes';
constructor(private http: HttpClient) { }
getAllCliente(): Observable<Cliente[]> {
return this.http.get<Cliente[]>(this.url + '/todos');
}
getClienteById(clienteid: string): Observable<Cliente> {
const apiurl = `${this.url}/${clienteid}`;
return this.http.get<Cliente>(apiurl);
}
createCliente(cliente: Cliente): Observable<Cliente> {
return this.http.post<Cliente>(this.url + '/incluir', cliente, httpOptions);
}
updateCliente(clienteid: string, cliente: Cliente): Observable<Cliente> {
const apiurl = this.url+ '/alterar?id=' + clienteid ;
return this.http.put<Cliente>(apiurl,cliente, httpOptions);
}
deleteClienteById(clienteid: string): Observable<number> {
return this.http.delete<number>(this.url + '/excluir?id=' + clienteid,httpOptions);
}
}
|
Aqui criamos o código do serviço que usa a url de acesso a Web API e o pacote Http para definir os métodos que vão realizar as operações CRUD usando os verbos Http: get, post, put e delete:
- getAllCliente
- getClienteById
- createCliente
- updateCliente
- deleteClienteById
Instalando e configurando o Angular Material
Agora vamos instalar o Angular Material em nosso projeto para criar uma interface mais amigável.
Abra uma janela de comandos e posicione-se na pasta do projeto e digite:
npm install --save @angular/material@7.2.0
npm install --save @angular/cdk@7.2.0
npm install --save @angular/animations@7.1.4
Ao final você pode abrir o arquivo package.json e conferir as versões instaladas:
Nota: Versões diferentes poderão não funcionar corretamente.
Após isso vamos abrir o arquivo app.module.ts e incluir todos os pacotes do material conforme abaixo:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClienteComponent } from './cliente/cliente.component';
import { ClienteService } from './cliente.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {
MatButtonModule, MatMenuModule, MatDatepickerModule,MatNativeDateModule , MatIconModule,
MatCardModule, MatSidenavModule,MatFormFieldModule,
MatInputModule, MatTooltipModule, MatToolbarModule
} from '@angular/material';
import { MatRadioModule } from '@angular/material/radio';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
ClienteComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatRadioModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule,
AppRoutingModule
],
providers: [HttpClientModule, ClienteService,MatDatepickerModule],
bootstrap: [AppComponent]
})
export class AppModule { }
|
A seguir vamos abrir o arquivo style.css da pasta src e definir o estilo do material que iremos usar em nossa aplicação :
|
@import '@angular/material/prebuilt-themes/indigo-pink.css'; |
Definindo a interface da aplicação Angular
Agora temos todos os elementos para poder definir a interface da aplicação no arquivo cliente.component.html da pasta cliente:
Veja abaixo o código que vamos usar:
|
<div class="container">
<mat-card>
</table> |
No arquivo cliente.component.ts vamos implementar a lógica por trás do formulário definido no código acima:
import { Component, OnInit } from '@angular/core';
import { Cliente } from '../cliente';
import { Observable } from 'rxjs';
import { ClienteService } from '../cliente.service';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-cliente',
templateUrl: './cliente.component.html',
styleUrls: ['./cliente.component.css']
})
export class ClienteComponent implements OnInit {
dataSaved = false;
clienteForm: any;
allClientes: Observable<Cliente[]>;
clienteIdUpdate = null;
massage = null;
constructor(private formbulider: FormBuilder, private clienteService:ClienteService) { }
ngOnInit() {
this.clienteForm = this.formbulider.group({
Nome: ['', [Validators.required]],
Email: ['', [Validators.required]],
Endereco: ['', [Validators.required]],
Telefone: ['', [Validators.required]],
Cidade: ['', [Validators.required]],
});
this.loadAllClientes();
}
loadAllClientes() {
this.allClientes = this.clienteService.getAllCliente();
}
onFormSubmit() {
this.dataSaved = false;
const cliente = this.clienteForm.value;
this.CreateCliente(cliente);
this.clienteForm.reset();
}
loadClienteToEdit(clienteId: string) {
this.clienteService.getClienteById(clienteId).subscribe(cliente=> {
this.massage = null;
this.dataSaved = false;
this.clienteIdUpdate = cliente.Id;
this.clienteForm.controls['Nome'].setValue(cliente.Nome);
this.clienteForm.controls['Email'].setValue(cliente.Email);
this.clienteForm.controls['Endereco'].setValue(cliente.Endereco);
this.clienteForm.controls['Telefone'].setValue(cliente.Telefone);
this.clienteForm.controls['Cidade'].setValue(cliente.Cidade);
});
}
CreateCliente(cliente: Cliente) {
if (this.clienteIdUpdate == null) {
this.clienteService.createCliente(cliente).subscribe(
() => {
this.dataSaved = true;
this.massage = 'Registro salvo com sucesso';
this.loadAllClientes();
this.clienteIdUpdate = null;
this.clienteForm.reset();
}
);
} else {
cliente.Id = this.clienteIdUpdate;
this.clienteService.updateCliente(this.clienteIdUpdate, cliente).subscribe(() => {
this.dataSaved = true;
this.massage = 'Registro Atualizado com sucesso';
this.loadAllClientes();
this.clienteIdUpdate = null;
this.clienteForm.reset();
});
}
}
deleteCliente(clienteId: string) {
if (confirm("Deseja deletar este cliente ?")) {
this.clienteService.deleteClienteById(clienteId).subscribe(() => {
this.dataSaved = true;
this.massage = 'Registro deletado com sucesso';
this.loadAllClientes();
this.clienteIdUpdate = null;
this.clienteForm.reset();
});
}
}
resetForm() {
this.clienteForm.reset();
this.massage = null;
this.dataSaved = false;
}
}
|
Para concluir vamos definir um estilo básico no arquivo cliente.component.css:
th,td{
text-align: center;
}
th{
background-color:#422956;
color: white;
}
.tbl1
{
width: 400px;
}
.tbl2
{
width: 400pxx;
} |
O código do arquivo app.component.ts é que define o ponto de entrada da aplicação:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Clientes';
}
|
E no arquivo app.component.html temos o código que vai acionar a aplicação Angular:
<p>
<app-cliente></app-cliente>
</p>
|
Para testar inicie a aplicação WEB API e a seguir na pasta do projeto angular digite: ng serve -o
A aplicação Angular será iniciada exibindo o seguinte leiaute :
Abaixo temos o funcionamento da aplicação Angular realizando as operações CRUD usando a Web API:
 |
Pegue o
projeto Angular aqui :
clientesApp.zip
Salmos 25:5
|
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 - AngularJS : Apresentação (início do curso) - Macoratti
-
ASP .NET Core e Angular 2 - Criando uma aplicação Básica - Macoratti