Vamos continuar nosso artigo falando sobre como atacar nossa aplicação front-end.

Implementando Swagger UI na Web Api

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

• 1. 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 a url abaixo para visualizar o Swagger em ação.

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

Swagger em ação

ng g s http

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class HttpService {

  configUrl = 'http://localhost:50568/api/Alunoes';

  getAlunos() {
    return this.http.get(this.configUrl);
  }

  constructor(private http: HttpClient) { }

}

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { HttpService } from './http.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { HttpService } from './http.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  alunos;

  constructor(private httpService: HttpService) {

  }

  ngOnInit() {
    this.httpService.getAlunos()
    .subscribe(alunos => this.alunos = alunos);

    console.log(this.alunos);
  }
}

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 artigo? Não deixe de comentar.

Valeu!