Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Symfony + AngularJS | Mladen Plavsic @DaFED26

1 619 vues

Publié le

Instructions how to create SinglePageApp using Symfony and AngularJS. Code examples, Best practices, Tips & Tricks

Publié dans : Logiciels
  • Soyez le premier à commenter

Symfony + AngularJS | Mladen Plavsic @DaFED26

  1. 1. u, _a ` ¢_- ' '. z - `; . w üUJHí? 'P: W3U . Emu_ 1,; 4 ` lHW"”FüuHE WVM HEHHMEIHE
  2. 2. Q*** MIJREBIJ {LEX E - SOLIIT *S V % . .. .n-D I 0 _ '
  3. 3. P . IM w 'i _ í _ «ill/ qu I. .. x
  4. 4. __ m m _ __ . ~.n`. ~.. `n-, _n-a _za-v wan - w aur_ . wa. .. Inn-JK - u o
  5. 5. 777' l" ln ' l. ll . lll , = *""I lili-ll @EK-aux 'LC : Il l ! I'm l* . laman : rn . __ _ j" >*'ll. ;lxf . .l ':3 n. 'rn a a l Mnpgçjlgllnílf»
  6. 6. lllllll! Ill! sliliiulll' l Create app-dedicated Bundle v FOSRestBundle v JMSSerialízerBundIe ~ or start with Symfony REST edition
  7. 7. will! llll lal-l lllllaills -í Place source code outside "public" folder Manage dependencies with bower, or use CDN Use Symfony-like module structure (config, controller. ..) If HTML5 mode - target= "_se If" to outbound links
  8. 8. ' . gg-VJ. eni, 'nna ^: :mx: Ilàx I'ma ' hiii_ ! unu k'. 131:! Ihu ' "` hig[_Iny. ~1-, :'. -, ; nga 2-. un: : `. . *: |_u`__IIs. _1-, a '. -, gat-Jun: IL-Iu _ *: |ci: ,IIy.1-. r:, Lun-nu: IL-m k, _,, ... a.. .iñí? ' - u- u- - u zlfílill, . ,_.
  9. 9. @luma: 3h *nimu @Ju '. _:n _Il "HHH IHI @all ; P I l h' '- ~--. -gí_r', _rg_íll k' I ' I '_ *-' ` 'zra. . . gs3.. ) _. _ 'inuman funny( 'Ing-gnawa! .in ; ~- '. nminàz: r.`xoiu. ;$:4gios.1:r 'islmlnàí ? uhhh 'nluv-n- 'islllllonülílollh-'lu 1:1 Tíluolfhiinlàr ol vlllgl. : :1 : illllo ; .- ll: l l: 'm l 1:' . G. IIILTQ-TYx-llllllln014571 'aliw. o u: ~i a P: í` 7 n@ r~ L . i'. -à '¢^` l Al. ' A, 5 : Jr i- g i b i j, 3 w ií 11 _nt ní`í 'j , n1- l -w P a **í l íu ` . i - - i cw. ' n
  10. 10. RESTFlIL API lllll* llillllllíllllllllS ShttpProvider. interceptors. push(functi0n(Sq, dependencyl, dependency2) { return { "esíc ; ei "c" : functionlrejection) { if (canRecover(rejecti0n)) { return responseorlilewPromise; } return Sqmejectlrejection); }; }); docsangularjsorg/ apí/ ng/ service/ &ttp
  11. 11. , : imiílllilv i H 'êllf`lltl H” . __ __ . . 9"** __ , _ - -. n*`: à;1olI| '1u 'imu : :m: : 'Ko {nna 'joti ; IKO a latay 'Jo? '. I ? Im jmuIum-, a ' : In - 'Ilag- ñ-'hwu 'jl . fyiiiíiiiillmãí.
  12. 12. llilil l* lalllliS
  13. 13. TEMPLATES lilillllll ll Slllilllll lili' llll lJlVí If HTML5 mode is enabled routing. yml (after all other Symfony routes) angular: path: N{rclte} defaults: { _controllerz AcmeDemoBundle: Default: index} requirements: route: .o`
  14. 14. TEMPLATES Symfony l7ll'l3.ll. l3.lll. li lil lillllill ' @Route(“/ template/ ", requirements= {"_meth0d"= "GET"}) '/ public function indexAction(Sname) { } AngularJS templateUrl: '/ template/ hello_world' return Sthis->render('AcneDem0Bundle: Template: '.Sname. '.html. twig');
  15. 15. l lwilbüí* 1 ill 'i / 'Jaw 'l is ir * 'liit @JJ t Luar" . .p9 ' . Il, ” all? ' n b" , ill? ” . II| 1y/
  16. 16. Himig ; i illlliliiiài ~ ~ í-glillgngiigiví . isçíllslíijlãiígji" *iii hHl-ílnii. . "í: .*| i]ll. _:llãi'lbr.1'zl ': . 'nay. _nwl-H (IL-ua ? mii x: ;ii|0t. .:1t:0 ri( _it 1 ' a . à - ; nínuiuunnvlahnw nn-. í -_ *Lynríoiiivfu znigglmnígiugu;
  17. 17. .-v'p"'= j i . ' `, '. 0 . x 5 ' ' : i: ã` jsàç Huhu: : ` , ;E H Ifíf/ i1 b ` . 0 ` k) " . s A ` 4 ` ' P ~ unni TWIG - / ” `i “H value }} mii i** ni. ,In K {I vubatin }{{ value {H} aavadati: I} * oub- e perform @ung r tead 'i' ' ' stac 'I koverfl l? i'
  18. 18. TEMP LATES Plllllliíll lilliiPLllllS AcmeDemoBundle: Default: template. html. twig <script type= *teitir34te'; l3te id= Hte : late {{ template ll > {% renderlcontrollerl*à: "eCe': Ei*dle: Te'; late: ;”de- , {`n; 'e : template} </ script> layout. html. twig {% include "AcmeDemoBundle: Default: template. html. twig" with {template: 'templ {% include ”AcmeDemoBundle: Default: template. html. twig" with {template: 'templ
  19. 19. il7iSSlilllí
  20. 20. ASSEIIC lilllillllllsS, lllzlillllllls Cllli. *'ili`il! `:li! 'l`iS Be careful with miníñcatíon function PhoneListCtrl(Sscope, Shttp) {. ..} Ph0neListCtrl. Sinject = [ Eazcze , `íWlTp`]; . ph0necatApp. controller(`P“c“e-;5tCtrl , PhoneL1stCtrl); function PhoneListCtrl(Sscope, Shttp) {. ..} ph0necatApp. controller(`P“c~e-;5tCtri , [ íszcçe , jwttç , PhoneListCtrl]);
  21. 21. ASSETIC ll illlYlS assetic: filters; uglifyjsz _ _ ` bin: /usr/ local/ bin/ uglifyjs
  22. 22. .Mlijzlllf l: :;ili. :; ii? iii i| ||ll`i`l| ll J} a ; ii'? ,i; .i. i *'i'ii: ii i' , lil Il J i: . .i » ~ i - "ri-iii Elwíhlgi tur- 'mg! ` 'Qlu iiiuDI= iii-i; u1iio| a=; 'tm-rum^: uLHIiJ-: üivii- i: iinníu : iyo 'Qui iiiuiiaiiioi; miioliq'uun-iu ^ juJzlgm' ' i: iiimlnlia: 'elu ii: =l). ':iiiol;1Iiiio| =; 'mumu ^ : :Azigion ' ' 1: iiimnll: Lamitan q : :ur _qliu- . a ; wma 'in n' v nama_ u' - -, ';1 j jm - F'. - qrofnvmn_ 10”: '11 : lrg ; nu' (:1 : uuulm . lllllOllltàl : i iii-. ..oizsiiio Heigl : i i : gi: : ul' : mgulnn . iiimlllau : i i: : oi-. in _nyu 14-. : : i i: :J): -.~i Ill “un
  23. 23. :Liiifllli i' " : imi Ui I i li 4.4 n : arm iTi . :5 HmmM”. l * -71 : oinníuiu mutual" “o: iii: ;_kuni: ;noia ` `: 'l-1l= á*. lH'C : n ' ay' ^t: iiii1._: r 'nig -> : n " "r, " " : inuuna: -v : a * ay' 'ung : L-uiuí: : u: : : -Join -> : Ma: 3,! " van -pm 'as : imi "iu, h! f? ! jz. '| :"1Ii: ..i-, Sl: lC"`- 1': :qn: - 4-'1 in n' ~ 'nm ola' . oliurí-'M! l: * J: ?ML `r: "- -z'n fu"- -cu “jn ; r - 4:19): ola' , gigigfímlss ! :1 J; :i iiio-Iíaiiio. 1:' `- -rtn . 4.1 fm n' ~ Him ola' .9luIpp': }:. I^! l-'l 1:_ : i iiiv-cíaiiiníí. ':4 'vu. . n . lut 1"" F_ - -iz p :1 , jn: -
  24. 24. ASSETIE ll'i. 'l3.llilll: ll, lilll 'llílill ill' lílllillilifililllS
  25. 25. llllllillílillllíl7illlllil, llllllllllllfílíllüli!
  26. 26. Il i HE. ." tgl. 31.3): tl” . flilíiéli l? líllíiiílf Hill i i “i” -. 'i'l'i~'flyl"lf~_ili Vi "it i inn/ i's: -l _sinulid-o i w-I-lfgé-. l ii-livslziif_ , Kan/ julllàill i”. iêiüellhiinun aüiulv . azn : :InmrL-eiizlllrtã
  27. 27. "rci, gilllil: illllll: lllllll. llllllalüüll: lIlllli *`? .i`ii| "“"i| ii'ii“i. i~~' i ii , I _ _| ___'Lil! _'1.. _1i_u_]`_ X i: i iiizisiíll-: iiii *I i liit: : ííelgiiiciis-i i. i`íç. A.. ._~. ... .i_--@'4IIlí IiVc-JLIIINH: “intindi” 'H' l'T-'-"l'-"*'-'= "l41i'l/ audit! )Oglíiàluiliul
  28. 28. ;m*nzrunusmuuu_; nlmmznhíñíãa a** W' ; mm "n17 1313.1) ; _r ; EaEu . L - _. 4 sia. I v _ _* , I __ r "E * . 'i8? . K -' I : EN 'F' ¢ '. " ` . J» “_ , A-íj ; m : u un_ : I 'my -: - . .rg-; fazg nr. : umm» twn. rn war _: , _Ilgjlgj n. -uí | ;', I_co1|| In'o; o_A' , o|ur-. u11/~: o;o1:< 9.15. u íw; navatglmjggiRgümqiíjnn'
  29. 29. “ííãéãiéSlítíüüia!
  30. 30. TRANSLAIIDN S HR? ' ER SEM: :Mí: ív. *`il'*Datu@ “HELERIEE~ESLIETK(Ma! {'73 trans 'üacme. demo. message. he11o_~'0r1d{'% endtrans 93}
  31. 31. . C O - ~ ~ : r: ~ClIENT SEE AíSIAIIJILFRIIMSYFMONY, E _j UsingüTr `{: _I '<htlll 1ang-"{{ app. request. locale }}"> &aaí *al / í 'C <sc ript s rc-"{{ asset ( 'bundla/ bazíngaj st ranslation/ js/ t ranslator . nin . j Q' ) Y* <sc ript s rc-"{{ url( 'bazingaj st ranslation _j s' ) }} "></ script> avasíl b9» - " n i Translatontrans( 'key' , {});
  32. 32. ' IIJ: RL`E: ,`I, IJ! IE . mauna-r -, nq[I1u'----g1a= n : i~<. : u1*'; l!lll'á-fi -QIaTH-, g-L-. .juolun -q-, r . n n. : :1 :1: _. _R . mlm nu *Ilnífuz'l-jlldd: n.. ._o; o)lc . .Lux : hug - Maa-Juan -maíw . “-'I= If~n“ã! lI'e$-*' "-'! l=I'.2'*= $-, '$-'! !"" "MJ . Sinya -mtakul “LV-V WN #Ilegííleíf ujíêàãrsfíelnniiínul
  33. 33. üíãSíítíaW “Hífííínülí (HIRHSKEE/ SURSBRH}E)
  34. 34. INSTANT TRAFFII. ' (PUBSUB) {iwíií “M Iíüííii Using NodeJS and socketio for Like, Comment, Message instant. subscribe(channe1, functionidata) { switch (data. action) { case 'created': / / do something break; } }); s0cket. io
  35. 35. F IJLm-“Aillislzidüüivilikíllíi' 92:? ?in : igiit n. v :1iti»: raiñ~gigai, :“x- (a. .. {a -_ , f? ? r? W J' “ ; fafas/ INA of'. -g]| ]_o« _. .` . Saraa-inuu-nzínorichnanula -unm 'u-iunfwímulul-. l m: elm. nami: : ~ -. Tínàrntkií
  36. 36. SFI] _ííslílflljlíll_Hilfllífàllflílllñl_ Google and Bing replace #! (hashbang) with ? _escaped_fragment_= developersgoogleconvwebmasters/ ajax-crawl ing searchergínel and. oom/ bing-now-supporü-googles-aawlableajax-standard-84149
  37. 37. @a Him Itçiãcuíln: m , : laa-n 'na : nm *avlllllãzv : tanllltí 3:1 : may : laa-n "iuuulu v "namummíxfa Ill . I I: ' *ak w: : qu: - vuouímu "amahan" ung: - "mluf 'a kalaunan: : ; 'mita u " - : gu: .aqu. cmgt-. ..omauninn ' ` fumlan? -.
  38. 38. li l l: T l f “ l: r Create Symfony+ AngularJS (+anything) Bundles r Nelmío Api Doc Bundle to auto generate API documentation and sandbox AnguIarUI Router for advanced routing and templating r Bíndonce to improve performance * Lo-Dash for utilities
  39. 39. Wu l k I Single code base I REST ful API available for mobile apps I Authentication, Authorization I Translation enabled I Two way cl ient-server traffic I SEO friendly
  40. 40. l I l
  41. 41. i, $@nnn`i= `rjI= -r)glhli&ffts _ . a . _. y. , . f v *T; .JmI{@? nT~. .~_: i l-. àlàgínlhtílã jçlliglgzgng giíitlllítvçlninrí' iltçtvítafigligtvgír-g

×