Angular 5 + .NET Framework + SQL Server + Swagger UI — Criando uma aplicação FullStack Parte II

Photo credit: Ted’s photos — For Me & You on Visual hunt/ CC BY-NC-SA

Vamos continuar nosso post falando de como atacar nossa aplicação Front-end.

Implementando Swagger UI na Web Api

Para implementar o Swagger é muito simples basta adicionar um pacote a nossa api e configurar e rebuildar o projeto, portanto siga os passos:

1. Clique com o botão direito do mouse em Solution ‘FullStackApi’. > Swashbuckle.

Adicionando pacote Swashbuckle via Nuget

2. Clique em Browser e pesquise por Swashbuckle. Selecione o pacote e no canto direito deixe marcado o projeto FullStackApi e clique em Install.

3. Confirme a instalação e verifique se o projeto selecionado é o correto e clique em Ok.

4. Build o projeto ctrl + shift + b.

5. Suba a Api.

Tudo certo! Agora temos o Swagger UI configurado.

6. Acesse url abaixo para visualizar o Swagger em ação.

http://localhost:50568/swagger/ui/index

Swagger em ação

Testando a aplicação Front-end

É hora de voltar a nossa aplicação fullstack-app que criamos no inicio do Post.

No prompt de comando que tínhamos aberto vamos criar um serviço Http Angular para acessar nossa web api.

Digite no prompt o comando:

ng g s http

Abra o arquivo criado http.service.ts e atualize com o seguinte código.

Abra o App.module e atualize com o código:

Agora abra o app.component.ts e atualize com o código:

Resultado

Prontinho agora nossa aplicação front-end está listando os dados que estão cadastrados em nosso banco dados, finalizando o ciclo. Front-end/web api/banco de dados.

Gostou do post? Não deixe de comentar! vlw!