8/17/2019 AngularJs e ASPNET
1/20
ASPNET,AngularJs e
Web API
8/17/2019 AngularJs e ASPNET
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.................................................................................@
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
6/20
8/17/2019 AngularJs e ASPNET
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/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
10/20
4
re%urn e:ues%.Crea%eesponse91%%pS%a%usCode."ade:ues%;R Pessoa p Z
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
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]
8/17/2019 AngularJs e ASPNET
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]
8/17/2019 AngularJs e ASPNET
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
8/17/2019 AngularJs e ASPNET
18/20
@
8/17/2019 AngularJs e ASPNET
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]
8/17/2019 AngularJs e ASPNET
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
Top Related