Like this? Share it with your network

Share

Spa with angular

on

  • 773 views

 

Statistics

Views

Total Views
773
Views on SlideShare
773
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Spa with angular Presentation Transcript

  • 1. Single Page Applications with Angular.js Danny Vernovsky dannyv@sela.co.il @dimkinv
  • 2. Agenda • Why web applications are hard? • Angular.js, how to? (Movie lib) • Pros & cons • Q & A
  • 3. Once upon a time...In 2005...
  • 4. In 2013...
  • 5. MV what? Model Controller View
  • 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. Controllers • Controllers are just functions • Used to setup initial state with $scope • Used to setup behaivours
  • 8. $scope • Holds the model • Provide API's (e.g $watch) • Connects between view and controller
  • 9. Demo Hello Angular
  • 10. Modules • No "main" method for application • Closed package code / reusable • No load order needed. application controllers services directives filters
  • 11. Directives • All ng-* are directives!!! • Extends HTML with behaviour • Comes in various of flavors
  • 12. Demo Movies Lib, Modules + Directives
  • 13. Services • Can be declared as service or factory • Usefull for DOM/data manipulations • Lazy loaded into memory
  • 14. Demo Movies Lib, Services
  • 15. Filters • Best used to format expression. • Can be also used on collections • Angular.js built-in filters
  • 16. Demo Movies Lib, Filters
  • 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. Demo Movies Lib, Complete Example
  • 19. Lets sum up! Cons Takes freedom Errors not always visible Complex to master
  • 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. 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. Questions?