AppliedJS Meetup @ Zalando

Some tips & tricks for Angularjs Beginners

Transcript

1. AngularJS knowledge share aktanaktas@gmail.com  
2. Is angularjs really worth the effort? •  Fast coding, prototyping, solidify ideas •  Organization •  Easy api integration •  Test oriented •  Easily extendible •  It’s popular aktanaktas@gmail.com  
3. Let’s start! aktanaktas@gmail.com  
4. JSON & AngularJS aktanaktas@gmail.com  
5. Abstracting Menus aktanaktas@gmail.com   Text  /  Constants   STATIC  CONTENT   Repe<<ve  Elements  
6. aktanaktas@gmail.com   { "menu": [ { "name": "First Link", "icon": "fa fa-connectdevelop" }, { "name": "Second Link", "icon": "fa fa-fire-extinguisher" }, { "name": "Third Link", "icon": "fa fa-frown-o" } ] } Step  1  
7. Get the data in angularjs aktanaktas@gmail.com  
8. aktanaktas@gmail.com   Angularjs  app   controller  scope  as   mc  not  $scope   Repea<ng  the  same   element  
9. Creating an angularjs code base from json aktanaktas@gmail.com   All  in  one  file,  compressed,  etc.    Doesn’t  change   oIen   We  need  an  array  
10. Use json as a source in gulp… aktanaktas@gmail.com   Reading  the  array  file  and  processing   all  files  
11. Now let’s try to keep our base file very lean. aktanaktas@gmail.com   Then  how  do  we  handle  all  other  files  we  need  just  for  some  routes?  
12. aktanaktas@gmail.com   Another  simple  json  file,  in  array  format  
13. aktanaktas@gmail.com   Trea<ng  js  &  css  differently   Just  copying  files  this   <me  
14. Back to oclazyload aktanaktas@gmail.com   Automate  this?  
15. The function to go with the resolve:{} aktanaktas@gmail.com   Crea<ng  promises…  
16. Create constants file equal to json aktanaktas@gmail.com  
17. The magic aktanaktas@gmail.com   Will  be  lazy  loaded  
18. Angular.extend with $scope aktanaktas@gmail.com  
19. Service Patterns aktanaktas@gmail.com  
20. Object Literal aktanaktas@gmail.com  
21. Provider aktanaktas@gmail.com  
22. Decorator aktanaktas@gmail.com  
23. Using $q - $q.all var deferred1 = $q.defer() , promise1 = deferred1.promise, deferred2 = $q.defer(), promise2 = deferred2.promise; $q.all([promise1, promise2]).then(x); aktanaktas@gmail.com  
24. Using $q - $.when To create an empty promise, $q.when() aktanaktas@gmail.com  
25. Btw, there is a notification handler in the promises! aktanaktas@gmail.com   Promise.then(x,  x,  no<fica<ons)  
26. That’s it. Thank you! aktanaktas@gmail.com  
27. Little about me before Q&A Ziya Aktas •  From Turkey, coming from San Francisco •  Love Berlin J •  New media & design background, then javascript & user experience design interests •  Currently working @ business.itembase.com •  Passionate about community development aktanaktas@gmail.com  
28. Q & A, and the rest •  http://www.meetup.com/appliedJavascript/ •  We have ticket discounts for Jsconf in Budapest, ask me for more info and there is a document shared in meetup website •  Next meetup is possibly about cloud applications of node.js apps. •  If you want to talk, please message me! aktanaktas@gmail.com or meetup.com aktanaktas@gmail.com