API .NET Core, método HTTP DELETE e Integração com Angular

Nesta aula iremos modificar a API criada em .Net Core implementando o método Delete e iremos fazer a integração de dados junto a uma aplicação Single Page Application utilizando o framework Angular.

Assine nossa Comunidade

API .Net Core - DELETE

O objetivo da aula de hoje é excluir um cliente, através de API, utilizando o método DELETE.

Iremos criar um novo método, o método DELETE na controller, para deletar o registro,enviando o código id.

      
        using Models;
        namespace APIAulaYoutube.Controllers 
        {
          [Route("clientes")]
          [ApiController] 
          public class ClientesController : ControllerBase 
          {
            [HttpDelete]
            [Route("{id}")]
            public void Excluir(int id)
            {
              Cliente.Excluir(id);
            }
          }
        }

Vamos criar o método Excluir na classe models, utilizando o Entity Framework.

      
      using System;
      using System.Collections.Generic;
      using System.Data.SqlClient;

      namespace Models 
      {
        [Table("Clientes")]
        public class Cliente 
        {
          private static DBContexto db = new DBContexto();
          private Cliente(){ }

          public int Id{ get; set;}
          public string Nome{ get; set;}
          public string Telefone{ get; set;}
          public string Endereco{ get; set;}

          public static void Excluir(int id)
          {
           db = new DBContexto();
           var cliente = db.Clientes.Where(c=> c.Id == id).First();
           db.Clientes.Remove(cliente);
           db.SaveChanges();
          }
        }
      }

Para fazermos os testes, vamos acessar o site restClient:

Criaremos uma requisição do tipo DELETE com a url https://localhost:5001/clientes/4, para excluir o cliente com id igual a 4;

O registro será excluído com sucesso, retornado o status 200.

Integração com Angular

Vamos acessar o site oficial do angular para instalar o angular.

Para instalar, digite o comando abaixo no terminal:

      
       npm install -g @angular/cli

Vamos gerar uma nova aplicação, digitando no terminal o comando ng new e o nome da aplicação será integracaoDotnetCore.

      
       ng new integracaoDotnetCore

Responda às perguntas:

Would you like to add Angular routing?(y/N): escolher y
Which stylesheet format would you like to use?: escolher CSS

Iremos mostrar os dados dos clientes na aplicação angular que foi criada.

Para isso, precisamos gerar um componente para mostrar esses dados dos clientes que obtivemos através do arquivo JSON.

Vamos utilizar o comando generate:

      
       ng genarate component clientes

Serão criados alguns arquivos dentro do componente clientes:

clientes.componente.css;
clientes.componente.html;
clientes.componente.spec.ts;
clientes.componente.ts.

Também será executado um update em um módulo ja existente no projeto, para incluir o componente clientes:

update src/app/app.module.ts

      
        import { ClientesComponent } from './clientes/clientes.component';

E também declarou o componente clientes na assinatura do módulo:

      
        @NgModule({
          declarations: [
          Clientes.Component
          ]
        })

Vamos inserir no módulo principal - arquivo app.component.html, a tag < app-clientes> do componente clientes:

    
     < app-clientes>< /app-clientes>

Precisamos permitir que o componente ClientesComponent fique disponivel para que todos possam acessar:

      
        @NgModule({
          bootstrap: [AppComponent, ClientesComponent]
        })

Iremos criar uma tabela Html para mostrar os dados do arquivo de clientes em JSON.

      
        < table class="table">
          < thead>
          < tr>
              < th scope="col" >#< /th>
              < th scope="col">Nome< /th>
              < th scope="col">Telefone< /th>
              < th scope="col">Endereço>< /th>
          < /tr>
          < tbody>
          < tr>
              < td scope="row">1< /td>
          < /tr>
       < /table>