2. Agenda
Wie ben ik
Wat is 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
Een open-source Javascript framework
Of zo als ze het zelf zeggen:
HTML enhanced for web apps!
9. HTML
<i n-otolr"tmCnrle"
dv gcnrle=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
ucin tmotolr$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
15. Directives
Pas de HTML aan 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
25. Waarom handig?
Meer logica naar 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 te gebruiken?
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 & 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'';
};
)
29. 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}
