Spa with angular
- 1. Single Page Applications with Angular.js Danny Vernovsky [email protected] @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...
- 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
- 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
- 15. Filters • Best used to format expression. • Can be also used on collections • Angular.js built-in 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?