AngularJS - An Introduction for Windows Developers (NDC London 2013)

Transcript

1. AngularJS – an Introduction for Windows developers Ingo Rammer ingo.rammer@thinktecture.com
2. Contact, Slides and Samples @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer
3. Single-Page Applications (SPAs)
4. Apps, not sites!
6. That was … •  A Windows EXE (classic Windows desktop) •  A Mac OS .app •  A browser-based web app •  An Android App (Phone & Tablet) •  An iOS App (iPhone and iPad) •  A Windows 8 Store Application •  And a Windows Phone 8 App All with the same source code … (offline-first, code & data!)
7. jQuery?
8. MVC/SPA Frameworks Model Binding Routing UI-Templating … different design ideas and visions
9. http://todomvc.com Currently 66 different implementations of the same application
10. sproutcore Google Trends – Aug 2009 to Aug 2013
11. backbone.js sproutcore Google Trends – Aug 2009 to Aug 2013
12. backbone.js ember.js sproutcore Google Trends – Aug 2009 to Aug 2013
13. backbone.js knockoutjs ember.js sproutcore Google Trends – Aug 2009 to Aug 2013
14. backbone.js knockoutjs ember.js angularjs sproutcore Google Trends – Aug 2009 to Aug 2013
15. AngularJS •  http://angularjs.org/, v1.2.3 •  HTML-centric SPAs –  ("HTML enhanced for web apps!") •  Components made of JS + HTML •  Embeddable, DI-based, testable •  Corporate Sponsor: Google
16. Demos http://github.com/ingorammer/talk-AngularJS
17. Model Binding •  Different approaches by framework –  Controller-initiated (Templating, jQuery, Handlebars/Mustache, ...) –  Observer pattern (Ember, Knockout, ...) –  Framework-initiated(Angular)
18. AngularJS: Controller •  Businesslogic •  Fields of $scope à accessible from view •  NO DOM-Manipulations in Controller!
19. AngularJS: Scope •  Digest-Cycle •  $apply, to trigger a cycle –  Directives, Services, Controller
20. AngularJS: Directives •  Components (HTML + JS) •  Encapsulate DOM-Manipulations •  Get data from $scope •  Application-specific or independent (zB angular-UI) •  Can encapsulate existing libraries
21. AngularJS: Services •  Passed via Dependency Injection (DI) to controllers, directives, and other services (as constructor-parameters) •  Often use-case independent logic (otherwise: controller) •  Careful with minification (array-syntax or $inject)
22. AngularJS: Routing •  $routeProvider in <module>.config –  .when() –  .otherwise()
23. AngularJS •  Structure which can scale to very large JavaScript projects –  Controller, $scope –  DOM-Views, Model-Binding –  Directives –  Routing –  Services –  Promises •  NO DOM manipulations in your controllers! Instead: usually in directives. Sometimes in services.
24. Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com