Download as PDF, PPTX
![ng-app
vrDmApoue=aglrmdl(DmAp,[mdl')
a eopMdl nua.oue'eop' 'oes].
cni(ucin$nepltPoie){
ofgfnto(itroaervdr
$nepltPoie.trSmo(<';
itroaervdrsatybl'[)
$nepltPoie.nSmo(>)
itroaervdredybl'';
};
)
Config & setup](https://image.slidesharecdn.com/symfonyangularjs-130327013712-phpapp01/75/Symfony-and-Angularjs-12-2048.jpg)
![Services
aglrmdl(mdl' [nRsuc' 'goke')
nua.oue'oes, 'geore, nCois].
fcoy'akr,fnto(rsuc){
atr(Hce' ucin$eore
vrHce =$eore"aihce/i" {d "i")
a akr rsuc(/p/akr:d, i: @d}
/ Adcasmtos
/ d ls ehd
Hce.oi =fnto(aa sces err {
akrlgn ucindt, ucs, ro)
$tpps(/p/oi/,dt)
ht.ot'ailgn' aa.
scessces.
ucs(ucs)
errerr;
ro(ro)
};
)](https://image.slidesharecdn.com/symfonyangularjs-130327013712-phpapp01/75/Symfony-and-Angularjs-14-2048.jpg)
![Twig & AngularJS templates
Aangezien zowel AngularJS als Twig {{ }} gebruikt voor variable.
Moet er één worden aangepast.
Handigst is AngularJS op de volgende manier:
vrDmApoue=aglrmdl(DmAp,[mdl')
a eopMdl nua.oue'eop' 'oes].
cni(ucin$nepltPoie){
ofgfnto(itroaervdr
$nepltPoie.trSmo(<';
itroaervdrsatybl'[)
$nepltPoie.nSmo(>)
itroaervdredybl'';
};
)](https://image.slidesharecdn.com/symfonyangularjs-130327013712-phpapp01/75/Symfony-and-Angularjs-28-2048.jpg)
![FOSRestBundle
Met de hulp van deze bundle krijg je data die normaal naar twig
gaat eenvoudig terug als json response
pbi fnto boscin$ae
ulc ucin okAto(nm)
{
$iw=Ve:cet(ra(bos = ary"ok$ae1,"ok
ve iw:raeary'ok' > ra(Bo nm " Bo
$ae2) 'ae = $ae)
nm ", nm' > nm);
$iw>eTmlt(AmDmBnl:eohlohm.wg)
ve-stepae'ceeoudeDm:el.tlti';
$ade =$hs>e(fsrs.iwhnlr)
hnlr ti-gt'o_etve_ade';
rtr $ade-hnl(ve)
eun hnlr>ade$iw;
}
Geeft voor app_dev.php/demo/books/Iwan?_format=json
{bos:"okIa 1,Bo Ia 2]"ae:Ia"
"ok"[Bo wn ""ok wn ",nm""wn}](https://image.slidesharecdn.com/symfonyangularjs-130327013712-phpapp01/75/Symfony-and-Angularjs-29-2048.jpg)
Symfony and Angularjs
- 1. & 26maart 2013 Iwan van Staveren
- 2. Agenda Wie ben ik Watis Symfony Wat is AngularJS Waarom handig? Hoe beide te gebruiken Twig FosRestBundle Vragen
- 3. Wie ben ik? Iwan van Staveren Software architect bij Oracle 13 jaar ervaring met PHP 7 jaar ervaring met Symfony nl.linkedin.com/in/iwanvanstaveren Twitter: @istaveren
- 4. Wat is ? Dat weten we hier wel :-) Volgens symfony.com Symfony is a PHP Web Development Framework. That doesn’t answer your question? Ok, let’s try that again. Symfony is a PHP Framework, a Philosophy, and a Community - all working together in harmony.
- 5. Wat is AngularJS Eenopen-source Javascript framework Of zo als ze het zelf zeggen: HTML enhanced for web apps!
- 6. MVC Models / Views/ Controllers
- 7. Resources vrUe =$eore'aiues' {d 'ojcI') a sr rsuc(/p/sr/, i: @betd}; / Dfutmtos / eal ehd { 'e' gt: {ehd'E', mto:GT} 'ae: {ehd'OT} sv' mto:PS', 'ur' {ehd'E' iArytu} qey: mto:GT, sra:re, 'eoe:{ehd'EEE} rmv' mto:DLT', 'eee:{ehd'EEE} dlt' mto:DLT' }; ... en nog veel meer!
- 8. Resources .. . Ue.rttp.sakr=fnto( {rtrti.shce;} srpooyeiHce ucin) eun hsi_akr Ue.rttp.aktf =fnto(){ti.urn =p } srpooyehcSuf ucinp hscret ; .. .
- 9. HTML <i n-otolr"tmCnrle" dvgcnrle=Iesotolr> <>oa ies <nu n-oe=ies tp=nme"/<p pTtl tm: ipt gmdl"tm" ye"ubr >/> <l u> <iTtlies{ ies} <l> l>oa tm { tm } /i <iTtladd{ adw(tm)} <l> l>oa de { dToies } /i <u> /l <i> dv Templates in HTML, niet in Javascript!
- 10. Controllers fnto IeCnrle(soe ucintmotolr$cp) { $cp.tm =2 soeies ; $cp.dTo=fnto(nu){ soeadw ucinipt rtr ipt+2 eun nu ; } } Demo Items 2 Total items 2 Items added 4
- 11. Hoe te beginnnen <tln-p=HceAp> hm gap"akrp" .. . <i n-otolr"wsmHceCr"../i> dv gcnrle=Aeoeakrtl>.<dv <i n-otolr"ueHceCr"../i> dv gcnrle=Sprakrtl>.<dv <hm> /tl Angular heeft zijn eigen scope in javascript en de DOM
- 12. ng-app vrDmApoue=aglrmdl(DmAp,[mdl') a eopMdl nua.oue'eop' 'oes]. cni(ucin$nepltPoie){ ofgfnto(itroaervdr $nepltPoie.trSmo(<'; itroaervdrsatybl'[) $nepltPoie.nSmo(>) itroaervdredybl''; }; ) Config & setup
- 13. ng-controller / DmDt cnrle / eoaa otolr fnto DmDtCr(wno,$otcp,$cp,$tp Ue){ ucin eoaatl$idw roSoe soe ht, sr $cp.sr =Ue.ur(ucindt){ soeues srqeyfnto(aa / Vldt ec Ue / aiae ah sr }; ) $cp.aiaesr=fnto(){ soevldtUe ucinh / Dtriei vldue / eemn f ai sr }; } Scoped local methods
- 14. Services aglrmdl(mdl' [nRsuc' 'goke') nua.oue'oes,'geore, nCois]. fcoy'akr,fnto(rsuc){ atr(Hce' ucin$eore vrHce =$eore"aihce/i" {d "i") a akr rsuc(/p/akr:d, i: @d} / Adcasmtos / d ls ehd Hce.oi =fnto(aa sces err { akrlgn ucindt, ucs, ro) $tpps(/p/oi/,dt) ht.ot'ailgn' aa. scessces. ucs(ucs) errerr; ro(ro) }; )
- 15. Directives Pas de HTMLaan zo als jij dat wilt. Mis je een <tab> tag in HTML dan kan je hem hiermee maken. Eigenlijk een MVC in een tag.
- 16. Testen Dat zit er bij net als bij Symfony. Heet Karma en werkt als unit testen. Satn Tsaua Sre (tp/vjaiagtu.o/etclr trig etclr evr ht:/otjn.ihbcmtsaua) ---------------------------------- --------------------------------- if:Tsaua sre satda ht:/oahs:86 no etclr evr tre t tp/lclot97/ if (anhr:Satn bosrCrm no luce) trig rwe hoe if (hoe2.) Cnetdo sce i TzEbK9x67C no Crm 50: once n okt d sbIJagm4L3 Crm 2.:Eeue 1 o 1 SCES(.3 sc /01sc) hoe 50 xctd 0 f 0 UCS 045 es . es
- 17.
- 18. ng-view <tln-p=HceAp> hm gap"akrp" .. . <i n-iw<dv dv gve>/i> <hm> /tl
- 19. The Router / Cniuerue / ofgr ots H.ofgfnto(ruervdr $oainrvdr { Acni(ucin$otPoie, lctoPoie) $otPoie. ruervdr we(//,{otolr SCr,tmltUl 'sai/hhm' hn's' cnrle: Htl epaer: /ttcs.tl }. ) we(//,{otolr ACr,tmltUl 'sai/hhm' hn'a' cnrle: Htl epaer: /ttca.tl }. ) ohrie{eieto '') tews(rdrcT: /}; / StHM5Md frrue / e TL oe o ots $oainrvdrhm5oetu) lctoPoie.tlMd(re; }; )
- 20. Gotchas (Or: things youwish they told you)
- 21.
- 22.
- 23. Therefore <citsc"tp:/jxgolai.o/jxlb/nuaj/../nu srp r=hts/aa.ogepscmaa/isaglrs105ag lrj"<srp> a.s>/cit <citsc"tp/cd.nuaj.r/nua-eore105mnj"< srp r=ht:/oeaglrsogaglrrsuc-...i.s> /cit srp> <citsc"tp/cd.nuaj.r/../nua-oke-...i. srp r=ht:/oeaglrsog105aglrcois105mn j"<srp> s>/cit
- 24. AngularJS is friendly But it chooses its friends carefully
- 25. Waarom handig? Meer logicanaar de client Geeft een betere response naar de gebruiker Minder load op de server Er komen steeds meer apps Apps en web pagina's kunnen de zelfde backend API gebruiken
- 26. Vraag hoevel %code PHP / Javascript In 2010? In 2013? In 2015?
- 27. Hoe beide tegebruiken? Voeg AngulerJS toe aan je twig template { bokfo_cit% % lc otsrp } { i apdbg% % f p.eu } <cittp=tx/aacit sc"{ast'ude/eoj/n srp ye"etjvsrp" r={ se(bnlsdm/sag ua/nua.s)}"<srp> lraglrj' }>/cit <cittp=tx/aacit sc"{ast'ude/eoj/n srp ye"etjvsrp" r={ se(bnlsdm/sag ua/nua-eorej' }"<srp> lraglrrsuc.s) }>/cit <cittp=tx/aacit sc"{ast'ude/eoj/n srp ye"etjvsrp" r={ se(bnlsdm/sag ua/nua-ij' }"<srp> lraglru.s) }>/cit { es % % le } {-jvsrps % aacit 'DmBnl/eore/ulcj/nua/nua.i.s @eoudeRsucspbi/saglraglrmnj' 'DmBnl/eore/ulcj/nua/nua-eoremnj @eoudeRsucspbi/saglraglrrsuc.i. s' 'DmBnl/eore/ulcj/nua/nua-imnj' @eoudeRsucspbi/saglraglru.i.s %} <cittp=tx/aacit sc"{astul}"<srp> srp ye"etjvsrp" r={ se_r }>/cit { edaacit % % njvsrps } { edf% % ni } <cittp=tx/aacit sc"{ast'ude/ojruigj srp ye"etjvsrp" r={ se(bnlsfssotn/s Let op! In dev mode gebruik niet de minified versie. Dat debugt /otrj' }"<srp> rue.s) }>/cit <cittp=tx/aacit sc"{pt(fsj_otn_s,{c srp ye"etjvsrp" r={ ah'o_sruigj' "a niet echt handig in Javascript lbc" "o.otrstaa} }"<srp> lak: fsRue.eDt") }>/cit { edlc % % nbok }
- 28. Twig & AngularJStemplates Aangezien zowel AngularJS als Twig {{ }} gebruikt voor variable. Moet er één worden aangepast. Handigst is AngularJS op de volgende manier: vrDmApoue=aglrmdl(DmAp,[mdl') a eopMdl nua.oue'eop' 'oes]. cni(ucin$nepltPoie){ ofgfnto(itroaervdr $nepltPoie.trSmo(<'; itroaervdrsatybl'[) $nepltPoie.nSmo(>) itroaervdredybl''; }; )
- 29. FOSRestBundle Met de hulpvan deze bundle krijg je data die normaal naar twig gaat eenvoudig terug als json response pbi fnto boscin$ae ulc ucin okAto(nm) { $iw=Ve:cet(ra(bos = ary"ok$ae1,"ok ve iw:raeary'ok' > ra(Bo nm " Bo $ae2) 'ae = $ae) nm ", nm' > nm); $iw>eTmlt(AmDmBnl:eohlohm.wg) ve-stepae'ceeoudeDm:el.tlti'; $ade =$hs>e(fsrs.iwhnlr) hnlr ti-gt'o_etve_ade'; rtr $ade-hnl(ve) eun hnlr>ade$iw; } Geeft voor app_dev.php/demo/books/Iwan?_format=json {bos:"okIa 1,Bo Ia 2]"ae:Ia" "ok"[Bo wn ""ok wn ",nm""wn}
- 30. Vragen Credits for theslides: Vojta Jína, Miško Hevery, Igor Minar, Patrick Aljord.