0

Spa with angular

486

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Spa with angular"

  1. 1. Single Page Applications with Angular.js Danny Vernovsky dannyv@sela.co.il @dimkinv
  2. 2. Agenda • Why web applications are hard? • Angular.js, how to? (Movie lib) • Pros & cons • Q & A
  3. 3. Once upon a time...In 2005...
  4. 4. In 2013...
  5. 5. MV what? Model Controller View
  6. 6. Angular.js as a framework • Based on MVC pattern o application.controller('myCtrl') • Can extend HTML vocabulary o application.directive('myElement') • Injectables o function($scope, $myService) • Two way binding o {{model.firstName}}
  7. 7. Controllers • Controllers are just functions • Used to setup initial state with $scope • Used to setup behaivours
  8. 8. $scope • Holds the model • Provide API's (e.g $watch) • Connects between view and controller
  9. 9. Demo Hello Angular
  10. 10. Modules • No "main" method for application • Closed package code / reusable • No load order needed. application controllers services directives filters
  11. 11. Directives • All ng-* are directives!!! • Extends HTML with behaviour • Comes in various of flavors
  12. 12. Demo Movies Lib, Modules + Directives
  13. 13. Services • Can be declared as service or factory • Usefull for DOM/data manipulations • Lazy loaded into memory
  14. 14. Demo Movies Lib, Services
  15. 15. Filters • Best used to format expression. • Can be also used on collections • Angular.js built-in filters
  16. 16. Demo Movies Lib, Filters
  17. 17. Single Page Application • Routes are the core of SPA • Can respond to deep linking URLs with $routeProvider • Rendered templates appied into ngView directive
  18. 18. Demo Movies Lib, Complete Example
  19. 19. Lets sum up! Cons Takes freedom Errors not always visible Complex to master
  20. 20. Pros Framework brings order Very easy to start Very declarative By Google (here to stay) Based on known pattern Created with testability in mind
  21. 21. Whats next? Angular.js 1.2RC1 • ng-animate with predefined animations • ‘controller as’ – aliases for controllers • finally, ng-if • better error messages for debugging • better documentation • And much more
  22. 22. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×