AngularJs e ASPNET

ASPNET,
AngularJs e
Web API
Sumrio
ASPNET, AngularJs e Web API.........................................................................3
Criando a aplicao ASP.NET..........................................................................3
Adicionar uma conexo um Banco de Dados..............................................4
Pacotes utilizados........................................................................................... 5
Modelo de Dados usando Entity Data Model..................................................6
Criando o Web API Controller para o CRUD..................................................7
Mtodos do protocolo [Http].....................................................................10
Module, Service e Controller........................................................................10
Definindo a inicializao do AngularJs Module........................................10
Criando o servio para mapeamento do Banco Service.........................11
Criando o Controller.................................................................................. 12
Referenciando os elementos (arquivos scripts e css) na aplicao..............15
Arquivo Index............................................................................................... 15
Arquivo _Layout............................................................................................ 16
Validando o formulrio................................................................................. 18
ASPNET, AngularJs e Web API

Neste item ser mostrado como se criar um projeto utilizando AngularJS e Web
API com o Visual Studio 2015 realizando o CRUD de uma tabela de usurios.
Ser apresentado a criao do projeto, referncia ao AngularJS e o toastr que
um framework para exibir mensagens, criao dos mtodos no Controller Web
API, criar um Modulo, Service e um Controller que so consumidos em uma View
ASP.NET MVC, ser mostrado como realizar o Databind entre a View e o
Controller.
Criando a aplicao ASP.NET

No Visual Studio, selecione um novo projeto e em seguida ASP.NET Web
Application:
Clicar em Change Authentication
Adicionar uma conexo um Banco de Dados

Primeiramente, vamos criar um banco de Dados e uma tabela para
utilizarmos no projeto. Criei um Banco nomeado BDAngular e uma tabela
Pessoa com os seguintes campos:
5
Selecione no Server Explorer uma nova conexo e preencha os dados de
acordo com a configurao de seu Server Name do SQL Server e selecione
o Banco de Dados criado para a aplicao:
Pacotes utilizados
No Solucion Explorer no Item References, clique com o boto direito do
mouse e selecione Manege NuGet Package
Instale os pacotes: Entity Framework e angularjs
Altere o arquivo BundleConfig.cs no folder App_Start, para referenciar o
script angular
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then,
when you're
// ready for production, use the build tool at http://modernizr.com to pick only the
tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
//Referncia ao angularJs
bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
"~/Scripts/angular.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
Em View Shared edite o arquivo _Layout.cshtml para adicionar a

referncia ao ao AngularJs:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angularjs")
@Scripts.Render("~/bundles/customjs")
@RenderSection("scripts", required: false)
Modelo de Dados usando Entity Data Model

No folder Models, adicione um novo item, ADO.NET Entity Data Model
Siga os passos selecionando criar o modelo baseado em um Banco

existente; a conexo definida anteriormente; em seguida as tabelas
desejadas...
Criando o Web API Controller para o CRUD

No folder Controller, adicione um item Controller e selecione Web API.
Vamos nome-lo de PessoaController
Adicione no arquivo Global.asax.cs o seguinte cdigo:

using System.Web.Http;
using System.Web.Routing;
protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
}
Editar o arquivo PessoaController.cs, gerado ao adicionar a WEB API,

acrescentado o cdigo abaixo. Observe os comentrios (para maiores
esclarecimentos) inseridos no prprio cdigo do arquivo.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
//Referncia s classes de Models
using AppAngularJs.Models;
namespace AppAngularJs.Controllers
{
//As rotas permitem que acionemos os mtodos atravs do Service do AngularJS
//RoutePrefix possibilita que criemos outras verses onde, apenas, passaremos ao
//cliente a nova rota
[RoutePrefix("api/v1/public")]
public class PessoaController : ApiController
{
private readonly BDAngularEntities _db = new BDAngularEntities();
9
//Caso tivssemos optado pela criao do modelo apenas por cdigo
//private readonly PessoaDBContext db = new PessoaDBContext();
//Aqui definiremos as operaes CRUD - Create; Read; Update e Delete
//Definir as Consultas (Read)
[HttpGet]
//Criar a rota para o AngularJs chamada pessoas
[Route("pessoas")]
public IQueryable<Pessoa> ObterPessoas()
{
return _db.Pessoa;
}
[HttpGet]
//Consultar uma pessoa atravs do id
//criar uma rota chamada pessoa e passar chave "id do tipo int"
[Route("pessoa/{id:int}")]
public HttpResponseMessage ObterPorPessoa(int id)
{
if (id <= 0)
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
Pessoa pessoa = _db.Pessoa.Find(id);
return Request.CreateResponse(HttpStatusCode.OK, pessoa);
}
//Alterar um registro (Update)
[HttpPut]
[Route("putpessoa")]
public HttpResponseMessage Alterar(Pessoa pessoa)
{
if (pessoa == null)
_db.Entry(pessoa).State = System.Data.Entity.EntityState.Modified;
_db.SaveChanges();
return Request.CreateResponse(HttpStatusCode.OK);
}
//Incluir um registro (Create)
[HttpPost]
[Route("postpessoa")]
public HttpResponseMessage Incluir(Pessoa pessoa)
{
if (pessoa == null)
//Verifiar se j existe uma pessoa cadastrada com o referido id
Pessoa p1 = _db.Pessoa.Find(pessoa.id);
if (p1!=null)
return Request.CreateResponse(HttpStatusCode.Conflict);
_db.Pessoa.Add(pessoa);
_db.SaveChanges();
}
//Excluir um registro (Delete)
[HttpDelete]
[Route("deletepessoa/{id:int}")]
public HttpResponseMessage Excluir(int id)
{
if (id <= 0)
10
Pessoa p1 = _db.Pessoa.Find(id);
_db.Pessoa.Remove(p1);
_db.SaveChanges();
}
//"Matar" as conexes utilizadas
protected override void Dispose(bool disposing)
{
if (disposing)
_db.Dispose();
base.Dispose(disposing);
}
}
Mtodos do protocolo [Http]

O protocolo HTTP define oito mtodos que indicam a ao a ser realizada no
recurso especificado. O mtodo determina o que o servidor deve fazer com a
URL fornecida no momento da requisio de um recurso. Segue uma breve
descrio dos quatro utilizados anteriormente:
GET para busca de informaes;

POST para incluso de informaes;
PUT para atualizao e
DELETE para excluso de um registro.
Module, Service e Controller

Em Scripts criar um folder App, onde armazenaremos os arquivos
javascripts necessrios para o modelo ArgularJS.
Definindo a inicializao do AngularJs Module

Um Module no AngularJS como um container que vai armazenar as partes
de nossa aplicao (Controllers, Services, etc).
Adicione um arquivo javascript nomeado Module.js no folder App.
Neste arquivo iremos definir a inicializao da app do angularjs.
Definiremos para iniciar no module => crudApp. Lembrando que
definimos o crudApp na tag <html>, isto far com que englobe toda a
aplicao.
11
var app = angular.module("crudApp", []);
Cria-se uma varivel comum app, o nome da varivel no importante,

mas como boa prtica sempre colocamos o nome do nosso Module na
varivel. Depois se atribui a essa varivel um Module do AngularJS atravs
do cdigo angular.module(). Nesse momento criado um novo Module do
AngularJS e atribudo varivel.
Para criar um Module deve-se passar dois parmetros obrigatrios:
Nome do Module;
Um array com todas as dependncias que vamos utilizar no nosso
Module (iremos falar mais sobre isso depois);
O nome do Module muito importante, pois atravs dele que vamos

iniciar nossa aplicao AngularJS atravs do arquivo index.html.
Criando o servio para mapeamento do Banco Service

Aqui, definiremos os servios que iro interagir com nosso Banco de Dados
atravs do WEB API PessoaController.cs. O Service ser utilizado pelo
Controller para acesso aos dados.
No folder App, adicione um arquivo javascript nomeado Service.js.
Digite o cdigo abaixo. Utilizaremos a varivel app, onde definiremos uma
Service chamada crudService que ser uma funo que utilizar http e
far a conexo com nosso PessoaController atravs das rotas definidas no
mesmo. Observar a relao dos mtodos do http com os definidos em
PessoaController.
app.service("crudService", function ($http) {
this.ObterPessoas = function () {
return $http.get("/api/v1/public/pessoas")
}
//Consulta pessoa atravs do id
this.ObterPessoaPorId = function (id) {
return $http.get("/api/v1/public/pessoa/" + id)
}
//Atualizar pessoa
this.AtualizarPessoa = function (pessoa) {
var resposta = $http({
method: "put",
url: "api/v1/public/putpessoa",
data: JSON.stringify(pessoa),
dataType: "json"
});
return resposta;
}
12
//Adicionar pessoa
//JSON.stringify, converte uma pessoa no formato JSON.
//Ver mais detalhes abaixo
this.AdicionarPessoa = function (pessoa) {
method: "post",
url: "api/v1/public/postpessoa",
data: JSON.stringify(pessoa),
dataType: "json"
});
return resposta;
}
//Excluir pessoa
this.ExcluirPessoa = function (id) {
// var rs = $http.delete("api/v1/public/deletepessoa/" + id);
method: "delete",
url: "api/v1/public/deletepessoa/" + JSON.stringify(id)
});
return resposta;
}
});
JSON (JavaScript Object Notation - Notao de Objetos JavaScript) uma

formatao leve de troca de dados. Est baseado em um subconjunto da
linguagem de programao JavaScript. JSON em formato texto e
completamente independente de linguagem. Estas propriedades fazem com
que JSON seja um formato ideal de troca de dados.
JSON est constitudo em duas estruturas:
Uma coleo de pares nome/valor (objeto).
Uma lista ordenada de valores (vetor/ lista).
Estas so estruturas de dados universais. Virtualmente todas as linguagens

de programao modernas as suportam, de uma forma ou de outra.
Criando o Controller
Os Controllers no AngularJS so os componentes (objetos JavaScript) que
fazem a ligao da nossa camada de visualizao (View) com os dados de
nossa aplicao (atravs do Service). So eles que trabalham e manipulam
os dados de nossas aplicaes.
Os Controllers so utilizados atravs da diretiva ng-controller (no
Index.html). Quando utilizamos um Controller em nossa aplicao, criamos
um objeto especial chamado $scope.
O objeto $scope um objeto JavaScript comum e no contexto de nossas
aplicaes ele seria a nossa camada Model da estrutura MVC. Dessa
13
maneira tanto a nossa camada de visualizao (View), quanto a nossa
camada de controladores (Controller) tem acesso aos dados do objeto
$scope. atravs desse objeto que o AngularJS realiza o binding dos dados.
No folder App, adicione um arquivo javascript nomeado Controller.js.
Digite o cdigo abaixo. Utilizaremos a varivel app, onde definiremos o
Controller para a crudCtrl definida anteriormente no arquivo Index.html.
Criaremos uma funo para acessar os servios do Banco. Atravs do
parmetro $scope, iremos acessar os servios crudService (definido em
Service.js) e trazer as informaes do Banco.
app.controller("crudCtrl", function ($scope, crudService) {
//Oculta a divPessoa no arquivo Index.cshtml
$scope.divPessoa = false;
$scope.readonlyId = true;
// funo para enviar o formulrio depois que a validao estiver ok
$scope.submitForm = function (isValid) {
// verifica se o formulrio vlido
if (isValid) {
}
};
obterPessoas();
function obterPessoas()
{
var pessoasData = crudService.ObterPessoas();
pessoasData.then(function (pessoa) {
//pessoa.data o retorno do JASON
$scope.pessoas = pessoa.data;
}, function () {
alert("Erro ao obter pessoas.", "Minha aplicao");
});
}
//Obter pessoa por id
$scope.obterPessoaPorId = function (pessoa) {
var pessoaData = crudService.ObterPessoaPorId(pessoa.id);
pessoaData.then(function(_pessoa){
$scope.pessoa = _pessoa.data;
$scope.id = pessoa.id;
$scope.nome = pessoa.nome;
$scope.email = pessoa.email;
$scope.Action = "Atualizar";
$scope.divPessoa = true;
}, function () {
alert("Erro ao obter pessoa por id.", "Minha aplicao");
});
$scope.AdicionarAtualizarPessoa = function () {
var pessoa = {
id: $scope.id,
14
nome: $scope.nome,
email: $scope.email,
};
var valorAcao = $scope.Action;
if (valorAcao == "Atualizar") {
var pessoaData = crudService.AtualizarPessoa(pessoa);
pessoaData.then(function (data) {
obterPessoas();
if (data.status == 200) {
alert("Pessoa alterada com sucesso!", "Minha aplicao");
}
}, function () {
alert("Erro ao atualizar!", "Minha aplicao");
});
} else {
var pessoaData = crudService.AdicionarPessoa(pessoa);
obterPessoas();
alert("Pessoa cadastrada com sucesso!", "Minha aplicao");
}
}, function (data) {
alert("Id j existente!", "Minha aplicao");
}
else {
alert("Erro ao incluir!", "Minha aplicao");
}
});
}
}
$scope.incluirPessoa = function () {
limparCampos();
$scope.Action = "Adicionar";
$scope.readonlyId = false;
$scope.divPessoa = true;
}
$scope.Cancelar = function () {
};
function limparCampos() {
$scope.id = "";
$scope.nome = "";
$scope.email = "";
}
//Excluir uma pessoa
$scope.excluirPessoa = function (pessoa) {
var pessoaData = crudService.ExcluirPessoa(pessoa.id);
//pessoaData recebe retorno da operao excluir. Se sucesso, executa o then
alert("Pessoa excluda com sucesso.", "Minha aplicao");
}
obterPessoas();
15
}, function () {
alert("Erro ao excluir pessoas.", "Minha aplicao");
});
}
});
Referenciando os elementos (arquivos scripts e css)

na aplicao
Editar o arquivo BundleConfig.cs e acrescentar o referido cdigo:
bundles.Add(new ScriptBundle("~/bundles/customjs").Include(
"~/Scripts/App/Controller.js",
"~/Scripts/App/Module.js",
"~/Scripts/App/Service.js"));
Ir at o _Layout.cshtml e informar as referncias:

Arquivo Index
Editar o arquivo Index.cshtml
@{
ViewBag.Title = "Home Page";
}
<div ng-controller="crudCtrl">
<div class="divList">
<p><b><i>Todas as Pessoas</i></b></p>
<table class="table table-hover">
<tr>
<td><b>ID</b></td>
<td><b>Nome</b></td>
<td><b>E-mail</b></td>
</tr>
<tr ng-repeat="pessoa in pessoas">
<td> {{pessoa.id}}</td>
<td> {{pessoa.nome}}</td>
<td> {{pessoa.email}}</td>
<td>
<span ng-click="obterPessoaPorId(pessoa)" class="btn btnprimary">Alterar</span>
16
<span ng-click="excluirPessoa(pessoa)" class="btn btndanger">Excluir</span>
</td>
</tr>
</table>
<span ng-click="incluirPessoa()" class="btn btn-default">Incluir Pessoa</span>
<div ng-show="divPessoa">
<p class="divHead"></p>
<table class="table">
<tr>
<td><b><i>{{Acao}}Pessoa</i></b></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>ID</b></td>
<td>

<input type="text" ng-readonly="readonlyId" ng-model="id"
class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" ng-model="nome" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" ng-model="email" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn btn-default" value="Salvar" ngclick="AdicionarAtualizarPessoa()" />
<input type="button" class="btn btn-danger" value="Cancelar" ngclick="Cancelar()" />
</td>
</tr>
</table>
</div>
</div>
Arquivo _Layout
Definio do local para iniciar o AngujarJs. Adicione o ng-app:
<html ng-app="crudApp">
17
Neste caso, definimos que toda a regio dentro da tag <html> far parte da
app AngularJs.
<!DOCTYPE html>
<html ng-app="crudApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-collapse">
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Minha aplicao", "Index", "Home", new { area = "" }, new
{ @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Incio", "Index", "Home")</li>
<li>@Html.ActionLink("Sobre", "About", "Home")</li>
<li>@Html.ActionLink("Contato", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Minha Aplicao ASP.NET com AngularJS</p>
</footer>
</div>
</body>
</html>
Aparncia da aplicao aps toda a codificao:
18
Validando o formulrio
Para comear vamos listar os requisitos do formulrio
Id obrigatrio;
nome obrigatrio e comprimento mnimo de 5 caracteres;
email no obrigatrio, mas tem que ser um e-mail vlido;
Formulrio de envio desativado se o formulrio no vlido;
Mostrar um erro de e-mail obrigatrio ou invlido.
Propriedades do formulrio Angular:

$valid, $invalid, $pristine, $dirty
O Angular fornece propriedades que nos ajudam a valid-los.
Proprieda
de
Descrio
$valid
Boolean; diz se um item vlido no momento com base nas

regras definidas.
$invalid
Boolean; diz se um item est invlido com base nas regras
19
Proprieda
de
Descrio
definidas.
$pristine
Boolean; Verdadeiro se o form/input ainda no foi usado.
$dirty
Boolean; Verdadeiro se o form/input foi usado.
Acessando as propriedades do formulrio Angular

Para acessar o formulrio: < form name >.< angular property >
ex: userForm.$valid
Alguns pontos importantes a observar aqui:
novalidate: isso vai evitar a validao padro do HTML5, j que isso

ser feito atravs do Angular;
ng-minlength e ng-maxlength no definem o tamanho mnimo e mximo
respectivamente;
O input id e nome so required;
O input e-mail type = email;
ng-disabled="userForm.$invalid" far com que o boto Salvar
fique habilitado quando a validao estiver correta e desabilitado caso
contrrio.
Altere o a divPessoa no Index.cshtml:
<div ng-show="divPessoa">
<p class="divHead"></p>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<table class="table">
<tr>
<td><b><i>{{Acao}}Pessoa</i></b></td>
<td></td>
</tr>
<tr>
<td><b>ID</b></td>
<td>

<input type="number" ng-readonly="readonlyId" ng-model="id"
class="form-control" required />
</td>
</tr>
<tr>
<td>
<input type="text" ng-model="nome" class="form-control" required ngminlength="5" />
</td>
</tr>
<tr>
<td>
20
<input type="email" ng-model="email" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn btn-default" value="Salvar" ngclick="AdicionarAtualizarPessoa()" ng-disabled="userForm.$invalid"/>
<input type="button" class="btn btn-danger" value="Cancelar" ngclick="Cancelar()" />
</td>
</tr>
</table>
</form>
</div>
Adicione o seguinte cdigo ao Controller.js:

// funo para enviar o formulrio depois que a validao estiver ok
$scope.submitForm = function (isValid) {
// verifica se o formulrio vlido
if (isValid) {
}
};

AngularJs e ASPNET

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

AngularJs e ASPNET

Transféré par

Droits d'auteur :

Formats disponibles

ASPNET,

ASPNET, AngularJs e Web API

Criando a aplicao ASP.NET

Clicar em Change Authentication

Adicionar uma conexo um Banco de Dados

Em View Shared edite o arquivo _Layout.cshtml para adicionar a

Modelo de Dados usando Entity Data Model

Siga os passos selecionando criar o modelo baseado em um Banco

Criando o Web API Controller para o CRUD

Adicione no arquivo Global.asax.cs o seguinte cdigo:

Editar o arquivo PessoaController.cs, gerado ao adicionar a WEB API,

Mtodos do protocolo [Http]

GET para busca de informaes;

Module, Service e Controller

Definindo a inicializao do AngularJs Module

Cria-se uma varivel comum app, o nome da varivel no importante,

O nome do Module muito importante, pois atravs dele que vamos

Criando o servio para mapeamento do Banco Service

JSON (JavaScript Object Notation - Notao de Objetos JavaScript) uma

Uma coleo de pares nome/valor (objeto).

Uma lista ordenada de valores (vetor/ lista).

Estas so estruturas de dados universais. Virtualmente todas as linguagens

Referenciando os elementos (arquivos scripts e css)

Ir at o _Layout.cshtml e informar as referncias:

Aparncia da aplicao aps toda a codificao:

Propriedades do formulrio Angular:

Boolean; diz se um item vlido no momento com base nas

Boolean; diz se um item est invlido com base nas regras

Boolean; Verdadeiro se o form/input ainda no foi usado.

Boolean; Verdadeiro se o form/input foi usado.

Acessando as propriedades do formulrio Angular

Alguns pontos importantes a observar aqui:

novalidate: isso vai evitar a validao padro do HTML5, j que isso

Adicione o seguinte cdigo ao Controller.js:

Vous aimerez peut-être aussi