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:

  • cliente.component.ss
  • cliente.component.html
  • cliente.component.ts

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:

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> 
    <mat-toolbar color="accent"> 
      <div align="center" style="color:white;text-align: right;"> 
       ASP .NET MVC 5 - Angular 7 - CRUD
      </div>   
    </mat-toolbar> 
  <br><br> 
    <mat-card-content> 
      <form [formGroup]="clienteForm"(ngSubmit)="onFormSubmit(clienteForm.value)"> 
              <table> 
                <tr> 
                  <td class="tbl1"> 
                    <mat-form-field class="demo-full-width"> 
                      <input formControlName="Nome" matTooltip="Informe o Nome" matInput placeholder="Nome"> 
                    </mat-form-field> 
                    <mat-error> 
                      <span *ngIf="!clienteForm.get('Nome').value
&& clienteForm.get('Nome').touched"></span> 
                    </mat-error> 
                  </td> 
                  <td class="tbl1"> 
                    <mat-form-field class="demo-full-width"> 
                      <input formControlName="Email" matTooltip="Entre com o Email" matInput placeholder="Email"> 
                    </mat-form-field> 
                    <mat-error> 
                      <span *ngIf="!clienteForm.get('Email').value
&& clienteForm.get('Email').touched"></span> 
                    </mat-error> 
                  </td> 
                </tr> 
                <tr> 
                  <td class="tbl1"> 
                      <mat-form-field class="demo-full-width"> 
                     <input formControlName="Telefone" matTooltip="Informe o Telefone" matInput placeholder="Telefone"> 
                    </mat-form-field> 
                    <br><br> 
                    <mat-error> 
                      <span *ngIf="!clienteForm.get('Telefone').value && clienteForm.get('Telefone').touched"></span> 
                    </mat-error> 
                  </td> 
                  <td class="tbl1"> 
                    <mat-form-field class="demo-full-width"> 
                      <input matTooltip="Informe Endereco"formControlName="Endereco" matInput placeholder="Endereco"> 
                    </mat-form-field> 
                    <mat-error> 
                      <span *ngIf="!clienteForm.get('Endereco').value
&& clienteForm.get('Endereco').touched"></span> 
                    </mat-error> 
                  </td> 
                  <td class="tbl1"> 
                    <mat-form-field class="demo-full-width"> 
                      <input formControlName="Cidade" matTooltip="Informe a Cidade" matInput placeholder="Cidade"> 
                    </mat-form-field> 
                    <mat-error> 
                      <span *ngIf="!clienteForm.get('Cidade').value
&& clienteForm.get('Cidade').touched"></span> 
                    </mat-error> 
                  </td> 
                </tr> 
                <tr> 
                  <td></td> 
                  <td  class="content-center"> 
                    <button type="submit" mat-raised-button color="accent"matTooltip="Clique em Submeter para enviar"[disabled]="!clienteForm.valid">Submeter</button>     
                    <button type="reset" mat-raised-button color="accent"matTooltip="Clique em Resetar para limpar" (click)="resetForm()">Resetar</button> 
                  </td> 
                  <td> 
                    <p *ngIf="dataSaved" style="color:rgb(0, 128, 0);font-size:20px;font-weight:bold" Class="success" align="left"> 
                      {{massage}} 
                    </p> 

                  </td> 
                </tr> 
              </table> 
  <br><br> 
        <table class="table" > 
            <tr ngclass="btn-primary"> 
              <th class="tbl2">Id</th> 
              <th class="tbl2">Nome</th> 
              <th class="tbl2">Email</th> 
              <th class="tbl2">Telefone</th> 
              <th class="tbl2">Endereco</th> 
              <th class="tbl2">Cidade</th> 
              <th class="tbl2"></th> 
              <th class="tbl2"></th> 
            </tr> 
            <tr *ngFor="let cliente of allClientes | async"> 
              <td class="tbl2">{{cliente.Id}}</td>
              <td class="tbl2">{{cliente.Nome}}</td> 
              <td class="tbl2">{{cliente.Email}}</td> 
              <td class="tbl2">{{cliente.Telefone}}</td> 
              <td class="tbl2">{{cliente.Endereco}}</td> 
              <td class="tbl2">{{cliente.Cidade}}</td> 
              <td class="tbl2"> 

                <button type="button" class="btn btn-info"matTooltip="Clique para Editar"(click)="loadClienteToEdit(cliente.Id)">Edita</button> 
              </td> 
              <td class="tbl2"> 
                <button type="button" class="btn btn-danger"matTooltip="Clique para Deletar"(click)="deleteCliente(cliente.Id)">Deleta</button> 
              </td> 
            </tr>    

          </table> 
      </form> 
    </mat-card-content> 
  </mat-card> 
  </div>

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

"Guia-me na tua verdade, e ensina-me, pois tu és o Deus da minha salvação; por ti estou esperando todo o dia."
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:


José Carlos Macoratti