Symfony and Angularjs

&

26 maart 2013
Iwan van Staveren

Agenda
Wie ben ik
Wat is Symfony
Wat is AngularJS
Waarom handig?
Hoe beide te gebruiken
Twig
FosRestBundle
Vragen

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

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.

Wat is AngularJS
Een open-source Javascript framework

Of zo als ze het zelf zeggen:

HTML enhanced for web apps!

MVC
Models / Views / Controllers

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!

Resources
..
.
Ue.rttp.sakr=fnto( {rtr ti.shce;}
srpooyeiHce ucin) eun hsi_akr
Ue.rttp.aktf =fnto(){ti.urn =p }
srpooyehcSuf ucinp hscret ;
..
.

HTML

<>oa ies <nu n-oe=ies tp=nme"//>
<l
u>
<iTtlies{ ies} <l>
l>oa tm { tm } /i
<iTtladd{ adw(tm)} <l>
l>oa de { dToies } /i

/l

dv

Templates in HTML, niet in Javascript!

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

Hoe te beginnnen
<tln-p=HceAp>
hm gap"akrp"
..
.

dv gcnrle=Aeoeakrtl>.<dv

dv gcnrle=Sprakrtl>.<dv
<hm>
/tl

Angular heeft zijn eigen scope in javascript en de DOM

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

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

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)
};
)

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.

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

ng-view
<tln-p=HceAp>
hm gap"akrp"
..
.
/i>
<hm>
/tl

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;
};
)

Gotchas
(Or: things you wish they told you)

$resource
Distributed separately

$cookies
Also distributed separately

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

AngularJS is friendly
But it chooses its friends carefully

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

Vraag hoevel % code PHP /
Javascript
In 2010?
In 2013?
In 2015?

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
ua/nua-eorej' }"<srp>
lraglrrsuc.s) }>/cit
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 }

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'';
};
)

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}

Vragen

Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar,
Patrick Aljord.

Symfony and Angularjs

More Related Content

Viewers also liked (17)

Symfony and Angularjs