Page 32 - Revista_60.pub

A PROGRAMAR

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

return objedicao.UpdateEdicao
//Listar anos (edicao);
public List<TblAnos> GetCities() }
{
List<Tblanos> lstAnos = new [HttpDelete]
List<TblAnos>(); [Route("api/Edicao/Delete/{id}")]
lstAno = (from AnosList in db.Tblanos public int Delete(int id)
select AnosList).ToList(); {
return objedicao.DeleteEdicao(id);
return lstAnos; }
}
} [HttpGet]
} [Route("api/Edicao/GetAnosList")]
public IEnumerable<TblAnos> Details()
Terminada esta parte, procedemos para a etapa seguinte. {
return objedicao.GetAnos();
}
}
Adicionar o controlador da Web API para a aplicação }
Novamente clicamos com o botão direito do rato em
Controllers, seguido de Adicionar e Novo Item. Vai ser apre- E pronto, com isto temos o nosso backend, pronto a ser utili-
1
sentada uma caixa de diálogo, onde devemos escolher zado pelo frontend em angular 5 ( angular6).
ASP.NET no lado esquerdo e de seguida do lado direito, Web
API Controller Class, por fim chamamos-lhe EdicoesControl-
ler.cs e clicamos OK. Isto irá criar a nossa classe controlador Criar um serviço em Angular
(controller) onde iremos chamar os métodos da classe Edico- Nesta etapa, vamos criar um serviço em Angular, que
esDataAccessLayer, para obter e passar dados para o frontend irá converter a resposta JSON da WebAPI e passa-la para o
em Angular. Para isso abrimos a classe que acabamos de criar nosso componente. Para tal, clica-se com o botão direito do
e colocamos o seguinte código:
rato em ClientApp/src/app depois em Adicionar e Nova Pas-
ta. Por fim damos o nome de Services à pasta que estamos
using System; a criar. Feito isto procedemos com a criação do serviço. Para
using System.Collections.Generic;
using System.Linq; tal, clicamos na pasta Services >> Novo Item >> Adicionar
using System.Threading.Tasks; novo item, isto irá apresentar uma caixa de diálogo, onde
using EFNgApp.Models; iremos selecionar do lado esquerdo “scripts”, do lado direito
using Microsoft.AspNetCore.Mvc;
TypeScript File a que damos o nome de ediservi-
namespace EFNgApp.Controllers ce.service.ts, e por fim clicamos OK.
{

public class EmployeeController : Controller import { Injectable, Inject } from '@angular/
{ core';
EdicoesDataAccessLayer objemployee = import { Http, Response } from '@angular/http';
new EdicoesDataAccessLayer(); import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
[HttpGet] import 'rxjs/add/operator/map';
[Route("api/Edicao/Index")] import 'rxjs/add/operator/catch';
public IEnumerable<TblEdicoes> Index() import 'rxjs/add/observable/throw';
{
return objedicao.GetAllEdicoes(); @Injectable()
} export class EdicoesService {
myAppUrl: string = "";
[HttpPost]
[Route("api/Edicao/Create")] constructor(private _http: Http, @Inject
public int Create([FromBody] TblEdicoes ('BASE_URL') baseUrl: string) {
edicao) this.myAppUrl = baseUrl;
{ }
return objedicao.AddEdicao(edicao);
} getAnoList() {
return this._http.get(this.myAppUrl + 'api/
[HttpGet] Edicoes/GetAnoList')
[Route("api/Edicao/Details/{id}")] .map(res => res.json())
public TblEdicoes Details(int id) .catch(this.errorHandler);
{ }
return objedicao.GetedicaoData(id);
} getEdicoes() {
return this._http.get(this.myAppUrl + 'api/
[HttpPut] Edicoes/Index')
[Route("api/Edicao/Edit")] .map((response: Response) => response.json())
public int Edit([FromBody]TblEdicoes .catch(this.errorHandler);
edicao) }
{

32