Angular 5 + .NET Framework + SQL Server + Swagger UI — Criando uma aplicação FullStack Parte II
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:
- Clique com o botão direito do mouse em Solution ‘FullStackApi’. > Swashbuckle.
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!