AngularJs e ASPNET

8/17/2019 AngularJs e ASPNET

1/20

ASPNET,AngularJs e

Web API


2/20

SumárioASPNET, AngularJs e Web API.........................................................................3

Criando a aplicação ASP.NET..........................................................................3

Adicionar uma coneão ! um "anco de #ados..............................................$

Paco%es u%ili&ados...........................................................................................'

(odelo de #ados usando En%i%) #a%a (odel..................................................*

Criando o Web API + Con%roller para o C-#..................................................

(/%odos do pro%ocolo 01%%p2.....................................................................4

(odule, Ser5ice e Con%roller........................................................................4

#e6nindo a iniciali&ação do AngularJs + (odule........................................4

Criando o ser5iço para mapeamen%o do "anco + Ser5ice.........................Criando o Con%roller..................................................................................7

e8erenciando os elemen%os 9ar:ui5os scrip%s e css; na aplicação..............'

Ar:ui5o Inde...............................................................................................'

Ar:ui5o alidando o 8ormul?rio.................................................................................@


3/20

3

ASPNET, AngularJs e Web API

Nes%e i%em ser? mos%rado como se criar um proe%o u%ili&ando AngularJS e WebAPI com o >isual S%udio 74' reali&ando o C-# de uma %abela de usu?rios.Ser? apresen%ado a criação do proe%o, re8erBncia ao AngularJS e o %oas%r :ue /um 8rameorD para eibir mensagens, criação dos m/%odos no Con%roller WebAPI, criar um (odulo, Ser5ice e um Con%roller :ue são consumidos em uma >ieASP.NET (>C, ser? mos%rado como reali&ar o #a%abind en%re a >ie e oCon%roller.

Criando a aplicação ASP.NET

No >isual S%udio, selecione um no5o proe%o e em seguida ASP.NET WebApplica%ion


4/20

$

Clicar em FCGange Au%Gen%ica%ionH

Adicionar uma coneão ! um "anco de #ados

Primeiramen%e, 5amos criar um banco de #ados e uma %abela parau%ili&armos no proe%o. Criei um "anco nomeado "#Angular e uma %abelaFPessoaH com os seguin%es campos


5/20

'

Selecione no FSer5er EplorerH uma no5a coneão e preencGa os dados deacordo com a con6guração de seu FSer5er NameH do S= Ser5er e selecioneo "anco de #ados criado para a aplicação

Paco$es u$ili%ados

No Solucion Eplorer no I%em Fe8erencesH, cli:ue com o bo%ão direi%o domouse e selecione F(anege Nue% PacDageH

Ins%ale os paco%es FEn%i%) KrameorDH e FangularsH

Al%ere o ar:ui5o F"undleCon6g.csH no 8older FApp


6/20


7/20

Siga os passos selecionando criar o modelo baseado em um "ancoeis%en%eR a coneão de6nida an%eriormen%eR em seguida as %abelasdeseadas...

Criando o Web API Con$roller para o C'-#

No 8older FCon%rollerH, adicione um i%em FCon%rollerH e selecione FWeb APIH.>amos nome?lo de PessoaCon%roller


8/20

@

Adicione no ar:ui5o lobal.asa.cs o seguin%e cdigo

using S)s%em.Web.1%%pRusing S)s%em.Web.ou%ingR

pro%ec%ed 5oid Applica%ion


9/20

[

OOCaso %i5/ssemos op%ado pela criação do modelo apenas por cdigo OOpri5a%e readonl) Pessoa#"Con%e% db Z ne Pessoa#"Con%e%9;R

OOA:ui de6niremos as operaçYes C-# Crea%eR eadR -pda%e e #ele%e

OO#e6nir as Consul%as 9ead;

01%%pe%2 OOCriar a ro%a para o AngularJs cGamada pessoas 0ou%e9MpessoasM;2 public Iuer)able\Pessoa] Vb%erPessoas9; L re%urn


10/20

4

re%urn e:ues%.Crea%eesponse91%%pS%a%usCode."ade:ues%;R Pessoa p Z


11/20

5ar app Z angular.module9McrudAppM, 02;R

Criase uma 5ari?5el comum FappH, o nome da 5ari?5el não / impor%an%e,mas como boa pr?%ica sempre colocamos o nome do nosso (odule na5ari?5el. #epois se a%ribui a essa 5ari?5el um (odule do AngularJS a%ra5/s

do cdigo Fangular.module9;H. Nesse momen%o / criado um no5o (odule doAngularJS e a%ribudo ! 5ari?5el.

Para criar um (odule de5ese passar dois parme%ros obriga%rios

• Nome do (oduleR• -m arra) com %odas as dependBncias :ue 5amos u%ili&ar no nosso

(odule 9iremos 8alar mais sobre isso depois;R

V nome do (odule / mui%o impor%an%e, pois / a%ra5/s dele :ue 5amosiniciar nossa aplicação AngularJS a%ra5/s do ar:ui5o Finde.G%mlH.

Criando o ser2iço para mapeamen$o do "anco Ser2ice

A:ui, de6niremos os ser5iços :ue irão in%eragir com nosso "anco de #adosa%ra5/s do FWE" API + PessoaCon%roller.csH. V Ser5ice ser? u%ili&ado peloCon%roller para acesso aos dados.

No 8older App, adicione um ar:ui5o a5ascrip% nomeado FSer5ice.sH.

#igi%e o cdigo abaio. -%ili&aremos a 5ari?5el FappH, onde de6niremos umaSer5ice cGamada FcrudSer5iceH :ue ser? uma 8unção :ue u%ili&ar? FG%%pH e8ar? a coneão com nosso FPessoaCon%rollerH a%ra5/s das ro%as de6nidas nomesmo. Vbser5ar a relação dos m/%odos do G%%p com os de6nidos emFPessoaCon%rollerH.

app.ser5ice9McrudSer5iceM, 8unc%ion 9G%%p; L %Gis.Vb%erPessoas Z 8unc%ion 9; L re%urn G%%p.ge%9MOapiO5OpublicOpessoasM; Q

OOConsul%a pessoa a%ra5/s do id %Gis.Vb%erPessoaPorId Z 8unc%ion 9id; L re%urn G%%p.ge%9MOapiO5OpublicOpessoaOM id; Q

OOA%uali&ar pessoa %Gis.A%uali&arPessoa Z 8unc%ion 9pessoa; L 5ar respos%a Z G%%p9L me%God Mpu%M, url MapiO5OpublicOpu%pessoaM, da%a JSVN.s%ringi8)9pessoa;, da%aT)pe MsonM Q;R re%urn respos%aR

Q


12/20

7

OOAdicionar pessoa OOJSVN.s%ringi8), con5er%e uma pessoa no 8orma%o JSVN. OO>er mais de%alGes abaio %Gis.AdicionarPessoa Z 8unc%ion 9pessoa; L 5ar respos%a Z G%%p9L me%God Mpos%M,

url MapiO5OpublicOpos%pessoaM, da%a JSVN.s%ringi8)9pessoa;, da%aT)pe MsonM Q;R re%urn respos%aR Q

OOEcluir pessoa %Gis.EcluirPessoa Z 8unc%ion 9id; L OO 5ar rs Z G%%p.dele%e9MapiO5OpublicOdele%epessoaOM id;R 5ar respos%a Z G%%p9L me%God Mdele%eM, url MapiO5OpublicOdele%epessoaOM JSVN.s%ringi8)9id; Q;R

re%urn respos%aR QQ;R

JS4N 9Ja5aScrip% Vbec% No%a%ion No%ação de Vbe%os Ja5aScrip%; / uma8orma%ação le5e de %roca de dados. Es%? baseado em um subconun%o dalinguagem de programação Ja5aScrip%. JSVN / em 8orma%o %e%o ecomple%amen%e independen%e de linguagem. Es%as propriedades 8a&em com:ue JSVN sea um 8orma%o ideal de %roca de dados.

JSVN es%? cons%i%udo em duas es%ru%uras

• -ma coleção de pares nomeO5alor 9obe%o;.

• -ma lis%a ordenada de 5alores 95e%orO lis%a;.

Es%as são es%ru%uras de dados uni5ersais. >ir%ualmen%e %odas as linguagensde programação modernas as supor%am, de uma 8orma ou de ou%ra.

Criando o Con$roller

Vs Con%rollers no AngularJS são os componen%es 9obe%os Ja5aScrip%; :ue8a&em a ligação da nossa camada de 5isuali&ação 9>ie; com os dados denossa aplicação 9a%ra5/s do Ser5ice;. São eles :ue %rabalGam e manipulamos dados de nossas aplicaçYes.

Vs Con%rollers são u%ili&ados a%ra5/s da dire%i5a Fngcon%rollerH 9noInde.G%ml;. uando u%ili&amos um Con%roller em nossa aplicação, criamosum obe%o especial cGamado scope.

V obe%o scope / um obe%o Ja5aScrip% comum e no con%e%o de nossasaplicaçYes ele seria a nossa camada F(odelH da es%ru%ura (>C. #essa


13/20

3

maneira %an%o a nossa camada de 5isuali&ação 9>ie;, :uan%o a nossacamada de con%roladores 9Con%roller; %em acesso aos dados do obe%oscope. a%ra5/s desse obe%o :ue o AngularJS reali&a o binding dos dados.

No 8older App, adicione um ar:ui5o a5ascrip% nomeado FCon%roller.sH.

#igi%e o cdigo abaio. -%ili&aremos a 5ari?5el FappH, onde de6niremos oCon%roller para a FcrudC%rlH de6nida an%eriormen%e no ar:ui5o Inde.G%ml.

Criaremos uma 8unção para acessar os ser5iços do "anco. A%ra5/s doparme%ro scope, iremos acessar os ser5iços FcrudSer5iceH 9de6nido emSer5ice.s; e %ra&er as in8ormaçYes do "anco.

app.con%roller9McrudC%rlM, 8unc%ion 9scope, crudSer5ice; L

OOVcul%a a di5Pessoa no ar:ui5o Inde.csG%ml scope.di5Pessoa Z 8alseR

scope.readonl)Id Z %rueR

OO 8unção para en5iar o 8ormul?rio depois :ue a 5alidação es%i5er oDscope.submi%Korm Z 8unc%ion 9is>alid; L

OO 5eri6ca se o 8ormul?rio / 5?lido i8 9is>alid; L Q QR

ob%erPessoas9;R

8unc%ion ob%erPessoas9; L 5ar pessoas#a%a Z crudSer5ice.Vb%erPessoas9;R

pessoas#a%a.%Gen98unc%ion 9pessoa; L OOpessoa.da%a / o re%orno do JASVN scope.pessoas Z pessoa.da%aR Q, 8unc%ion 9; L aler%9MErro ao ob%er pessoas.M, M(inGa aplicaçãoM;R Q;R Q

OOVb%er pessoa por id scope.ob%erPessoaPorId Z 8unc%ion 9pessoa; L 5ar pessoa#a%a Z crudSer5ice.Vb%erPessoaPorId9pessoa.id;R

pessoa#a%a.%Gen98unc%ion9


14/20

$

nome scope.nome, email scope.email, QR 5ar 5alorAcao Z scope.Ac%ionR

i8 95alorAcao ZZ MA%uali&arM; L

5ar pessoa#a%a Z crudSer5ice.A%uali&arPessoa9pessoa;R pessoa#a%a.%Gen98unc%ion 9da%a; L ob%erPessoas9;R scope.di5Pessoa Z 8alseR i8 9da%a.s%a%us ZZ 744; L aler%9MPessoa al%erada com sucesso_M, M(inGa aplicaçãoM;R Q Q, 8unc%ion 9; L aler%9MErro ao a%uali&ar_M, M(inGa aplicaçãoM;R Q;R Q else L 5ar pessoa#a%a Z crudSer5ice.AdicionarPessoa9pessoa;R pessoa#a%a.%Gen98unc%ion 9da%a; L ob%erPessoas9;R

i8 9da%a.s%a%us ZZ 744; L aler%9MPessoa cadas%rada com sucesso_M, M(inGa aplicaçãoM;R Q scope.di5Pessoa Z 8alseR Q, 8unc%ion 9da%a; L i8 9da%a.s%a%us ZZ $4[; L aler%9MId ? eis%en%e_M, M(inGa aplicaçãoM;R Q else L aler%9MErro ao incluir_M, M(inGa aplicaçãoM;R Q Q;R Q

Q scope.incluirPessoa Z 8unc%ion 9; L limparCampos9;R scope.Ac%ion Z MAdicionarMR scope.readonl)Id Z 8alseR scope.di5Pessoa Z %rueR Q

scope.Cancelar Z 8unc%ion 9; L scope.readonl)Id Z %rueR scope.di5Pessoa Z 8alseR QR

8unc%ion limparCampos9; L scope.id Z MMR scope.nome Z MMR scope.email Z MMR Q

OOEcluir uma pessoa scope.ecluirPessoa Z 8unc%ion 9pessoa; L 5ar pessoa#a%a Z crudSer5ice.EcluirPessoa9pessoa.id;R

OOpessoa#a%a recebe re%orno da operação ecluir. Se sucesso, eecu%a o %Gen pessoa#a%a.%Gen98unc%ion 9da%a; L i8 9da%a.s%a%us ZZ 744; L

aler%9MPessoa ecluda com sucesso.M, M(inGa aplicaçãoM;R Q ob%erPessoas9;R


15/20

'

Q, 8unc%ion 9; L aler%9MErro ao ecluir pessoas.M, M(inGa aplicaçãoM;R Q;R Q

Q;R

'e(erenciando os elemen$os 5ar6ui2os scrip$s e css7

na aplicação

Edi%ar o ar:ui5o F"undleCon6g.csH e acrescen%ar o re8erido cdigo

bundles.Add9ne Scrip%"undle9MObundlesOcus%omsM;.Include9 MOScrip%sOAppOCon%roller.sM, MOScrip%sOAppO(odule.sM,

MOScrip%sOAppOSer5ice.sM;;R

Ir a%/ o ie"ag.Ti%le Z M1ome PageMRQ

\di5 ngcon%rollerZMcrudC%rlM] \di5 classZMdi5=is%M] \p]\b]\i] Todas as Pessoas\Oi]\Ob]\Op] \%able classZM%able %ableGo5erM] \%r] \%d]\b]I#\Ob]\O%d] \%d]\b]Nome\Ob]\O%d] \%d]\b]Email\Ob]\O%d] \O%r] \%r ngrepea%ZMpessoa in pessoasM] \%d] 88pessoa.id99\O%d] \%d] 88pessoa.nome99\O%d] \%d] 88pessoa.email99\O%d] \%d]

\span ngclicDZMob%erPessoaPorId9pessoa;M classZMb%n b%nprimar)M]Al%erar\Ospan]


16/20

*

\span ngclicDZMecluirPessoa9pessoa;M classZMb%n b%ndangerM]Ecluir\Ospan] \O%d] \O%r] \O%able]

\span ngclicDZMincluirPessoa9;M classZMb%n b%nde8aul%M]Incluir Pessoa\Ospan]

\di5 ngsGoZMdi5PessoaM] \p classZMdi51eadM]\Op] \%able classZM%ableM] \%r] \%d]\b]\i]88Acao99Pessoa\Oi]\Ob]\O%d] \%d]\O%d] \%d]\O%d] \%d]\O%d] \%d]\O%d] \O%r] \%r] \%d]\b]I#\Ob]\O%d] \%d] \_-%ili&amos o ngmodel para reali&ar o bind 9ligar; !s propriedades depessoa no con%roller] \inpu% %)peZM%e%M ngreadonl)ZMreadonl)IdM ngmodelZMidM classZM8ormcon%rolM O] \O%d] \O%r] \%r] \%d]\b]Nome\Ob]\O%d] \%d] \inpu% %)peZM%e%M ngmodelZMnomeM classZM8ormcon%rolM O] \O%d]

\O%r] \%r] \%d]\b]Email\Ob]\O%d] \%d] \inpu% %)peZM%e%M ngmodelZMemailM classZM8ormcon%rolM O] \O%d] \O%r] \%r] \%d] \inpu% %)peZMbu%%onM classZMb%n b%nde8aul%M 5alueZMSal5arM ngclicDZMAdicionarA%uali&arPessoa9;M O] \inpu% %)peZMbu%%onM classZMb%n b%ndangerM 5alueZMCancelarM ngclicDZMCancelar9;M O] \O%d] \O%r] \O%able] \Odi5] \Odi5]

Ar6ui2o :;a+ou$

#e6nição do local para iniciar o AnguarJs. Adicione o ngapp

\G%ml ngappZMcrudAppM]


17/20

Nes%e caso, de6nimos :ue %oda a região den%ro da %ag \G%ml] 8ar? par%e daapp AngularJs.

\_#VCTfPE G%ml]\G%ml ngappZMcrudAppM]\Gead]

\me%a cGarse%ZMu%8@M O] \me%a nameZM5iepor%M con%en%ZMid%GZde5iceid%G, ini%ialscaleZ.4M] \%i%le]U>ie"ag.Ti%le () ASP.NET Applica%ion\O%i%le] US%)les.ender9MOCon%en%OcssM; UScrip%s.ender9MObundlesOmoderni&rM;\OGead]\bod)] \di5 classZMna5bar na5barin5erse na5bar6ed%opM] \di5 classZMcon%ainerM] \di5 classZMna5barGeaderM] \bu%%on %)peZMbu%%onM classZMna5bar%oggleM da%a%oggleZMcollapseM da%a%arge%ZM.na5barcollapseM] \span classZMiconbarM]\Ospan]

\span classZMiconbarM]\Ospan] \span classZMiconbarM]\Ospan] \Obu%%on] U1%ml.Ac%ion=inD9M(inGa aplicaçãoM, MIndeM, M1omeM, ne L area Z MM Q, neL Uclass Z Mna5barbrandM Q; \Odi5] \di5 classZMna5barcollapse collapseM] \ul classZMna5 na5barna5M] \li]U1%ml.Ac%ion=inD9MIncioM, MIndeM, M1omeM;\Oli] \li]U1%ml.Ac%ion=inD9MSobreM, MAbou%M, M1omeM;\Oli] \li]U1%ml.Ac%ion=inD9MCon%a%oM, MCon%ac%M, M1omeM;\Oli] \Oul] \Odi5] \Odi5] \Odi5] \di5 classZMcon%ainer bod)con%en%M] Uender"od)9; \Gr O] \8oo%er] \p]cop)R U#a%eTime.No.fear (inGa Aplicação ASP.NET com AngularJS\Op] \O8oo%er] \Odi5]

UScrip%s.ender9MObundlesO:uer)M; UScrip%s.ender9MObundlesOboo%s%rapM; UScrip%s.ender9MObundlesOangularsM; UScrip%s.ender9MObundlesOcus%omsM;

UenderSec%ion9Mscrip%sM, re:uired 8alse;\Obod)]\OG%ml]

AparBncia da aplicação aps %oda a codi6cação


18/20

@


19/20

[

Propriedade

#escrição

de6nidas.

pris%ine "ooleanR >erdadeiro se o 8ormOinpu% ainda não 8oi usado.

dir%) "ooleanR >erdadeiro se o 8ormOinpu% 8oi usado.

Acessando as propriedades do 8ormul?rio Angular

Para acessar o 8ormul?rio \ 8orm name ].\ angular proper%) ]

• e userKorm.5alid

Alguns pon%os impor%an%es a obser5ar a:ui• no2alida$e isso 5ai e5i%ar a 5alidação padrão do 1T(=', ? :ue isso

ser? 8ei%o a%ra5/s do AngularR• ngminleng%G e ngmaleng%G no de6nem o %amanGo mnimo e m?imo

respec%i5amen%eR• V inpu% id e nome são re6uired=• V inpu% email / $+pe > ?email@=• ngdisabled>Buserorm.Din2alidB 8ar? com :ue o bo%ão FSal5arH

6:ue Gabili%ado :uando a 5alidação es%i5er corre%a e desabili%ado casocon%r?rio.

Al%ere o a Fdi5PessoaH no Inde.csG%ml

\di5 ngsGoZMdi5PessoaM] \p classZMdi51eadM]\Op] \8orm nameZMuserKormM ngsubmi%ZMsubmi%Korm9userKorm.5alid;M no5alida%e] \%able classZM%ableM] \%r] \%d]\b]\i]88Acao99Pessoa\Oi]\Ob]\O%d] \%d]\O%d] \O%r] \%r] \%d]\b]I#\Ob]\O%d] \%d]

\_-%ili&amos o ngmodel para reali&ar o bind 9ligar; !s propriedades depessoa no con%roller] \inpu% %)peZMnumberM ngreadonl)ZMreadonl)IdM ngmodelZMidM classZM8ormcon%rolM re:uired O] \O%d] \O%r] \%r] \%d]\b]Nome\Ob]\O%d] \%d] \inpu% %)peZM%e%M ngmodelZMnomeM classZM8ormcon%rolM re:uired ngminleng%GZM'M O] \O%d] \O%r] \%r] \%d]\b]Email\Ob]\O%d] \%d]


20/20

74

\inpu% %)peZMemailM ngmodelZMemailM classZM8ormcon%rolM O] \O%d] \O%r] \%r] \%d] \inpu% %)peZMbu%%onM classZMb%n b%nde8aul%M 5alueZMSal5arM ng

clicDZMAdicionarA%uali&arPessoa9;M ngdisabledZMuserKorm.in5alidMO] \inpu% %)peZMbu%%onM classZMb%n b%ndangerM 5alueZMCancelarM ngclicDZMCancelar9;M O] \O%d] \O%r] \O%able] \O8orm]\Odi5]

Adicione o seguin%e cdigo ao Con%roller.s

OO 8unção para en5iar o 8ormul?rio depois :ue a 5alidação es%i5er oDscope.submi%Korm Z 8unc%ion 9is>alid; L

OO 5eri6ca se o 8ormul?rio / 5?lido i8 9is>alid; L Q QR

AngularJs e ASPNET

Documents

Transcript of AngularJs e ASPNET