Page 33 - Revista_60.pub

A PROGRAMAR

ASP.NET CORE, ANGULAR 5 - CRUD COM ENTITY FRAMEWORK

à pasta ClientApp/src/app/AddEdicao e clicamos com o bo-
getEdicaoById(id: number) { tão direito nessa pasta e depois em novo. Do lado esquerdo
return this._http.get(this.myAppUrl + "api/
Edicao/Details/" + id) escolhemos Web->scripts e do lado direito TypeScript file.
.map((response: Response) => response.json()) Damos o nome de addEdicao.component.ts e por fim clica-
.catch(this.errorHandler) mos em adicionar.
}
Findo este procedimento vamos criar o HTML que
saveEdicao(edicao) {
return this._http.post(this.myAppUrl + 'api/ será apresentado. Para tal, novamente clicamos com o botão
Edicao/Create', edicao) direito do rato na pasta que criamos anteriormente, seleccio-
.map((response: Response) => response.json()) namos “adicionar”, do lado esquerdo escolhemos ASP.NET
.catch(this.errorHandler) Core e do lado direito HTML Page, damos o nome addedi-
}
cao.component.html e clicamos ok. Assim ficamos com o
updateEdicao(edicao) { que precisamos para podermos escrever o código deste
return this._http.put(this.myAppUrl + 'api/ componente. Começamos pelo fetchedicao.component.ts,
Edicao/Edit', edicao)
.map((response: Response) => response.json()) abrimos e colocamos o seguinte código:
.catch(this.errorHandler);
} //importa os módulos do Angular
import { Component, Inject } from '@angular/
deleteEdicao(id) { core';
return this._http.delete(this.myAppUrl + "api/ import { Http, Headers } from '@angular/http';
Edicao/Delete/" + id) import { Router, ActivatedRoute } from '@angular/
.map((response: Response) => response.json()) router';
.catch(this.errorHandler); //importa o edicoesService
} import { EdicoesService } from '../../services/
ediservice.service'
errorHandler(error: Response) { //decorador @Component, que define o url do tem-
console.log(error); plate, para o componente
return Observable.throw(error); @Component({
} templateUrl: './fetchedicao.component.html'
} })

É possível que neste momento apareça um warning (aviso) de export class FetchEdicaoComponent {
conversão de tipo implícito. Para contornar essa situação alte- public ediList: EdicaoData[]; //cria um array
do tipo EdicaoData, onde EdicaoData é um interfa-
ramos a flag noImplicitAny para false, no tsconfig.json. ce com as mesmas propriedades da classe do Model
TblEdicoes
{
"compileOnSave": false, constructor(public http: Http, private _router:
"compilerOptions": { Router, private _edicaoService: EdicaoService) {
"outDir": "./dist/out-tsc", this.getEmployees();//chamamos este método
"sourceMap": true, aqui para permitir mostrar resultados no carrega-
"declaration": false, mento da pagina
"moduleResolution": "node", }
"emitDecoratorMetadata": true,
"experimentalDecorators": true, //chamamos o método getEdicao do nosso servisse
"target": "es5", EdicoesService que retornará um array do tipo
"typeRoots": [ Edicao que será armazenado na variável ediList
"node_modules/@types" getEdicao() {
], this._edicaoService.getEdicao().subscribe(
"lib": [ data => this.ediList = data
"es2017", )
"dom" }
],
"noImplicitAny": false delete(edicaoID) {
} var ans = confirm("Deseja apagar a edicao com
} o Id: " + edicaoID);
if (ans) {
this._edicaoService.deleteEdicao
(edicaoID).subscribe((data) => {
this.getEdicao();
Criando os componentes Angular }, error => console.error(error))
}
Nesta etapa criamos os componentes para a nossa }
aplicação exemplo. Como se trata de um exemplo bastante }
simples, em que apenas temos um registo de edições e anos
de cada edição, apenas iremos precisar de adicionar dois com- interface EdicaoData {
edicaoId: number;
ponentes, um para obter uma edição e outro para adicionar TemaCapa: string;
uma edição. Começamos por criar uma pasta chamada addE- ano: string;
dicao, na pasta /ClientApp/src/app/ . Logo de seguida criamos mes: string;
}
um componente que irá adicionar uma edição. Para isso vamos

33