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

7a1b0b24e5251ee7f5407681cca7d142?s=47 Ingo Rammer
December 05, 2013

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

7a1b0b24e5251ee7f5407681cca7d142?s=128

Ingo Rammer

December 05, 2013
Tweet

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!

  5. None
  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