1 / 17

AngularJS

AngularJS. A Gentle Introduction. John Ptacek/@ jptacek www.SkylineTechologies.com / www.jptacek.com jptacek@SkylineTechnologies.com. Agenda. AngularJS Overview Demos. Overview. http://alicialiu.net/leveling-up-angular-talk /#/. AngularJS – The why. Framework. NOT a Library

livi
Download Presentation

AngularJS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AngularJS A Gentle Introduction John Ptacek/@jptacek www.SkylineTechologies.com / www.jptacek.com jptacek@SkylineTechnologies.com

  2. Agenda • AngularJS Overview • Demos

  3. Overview • http://alicialiu.net/leveling-up-angular-talk/#/

  4. AngularJS – The why • Framework. NOT a Library -Contains everything you need for SPA • Broken into components • Controllers, view, models, services, etc • MVC/MVVM Framework • Two Way Data binding • Enables test friendly code

  5. AngularJS – The why NOT • Performance • Framework not a library • Functions, not computed properties • Directives • Powerful, not always intuitive • Documentation

  6. Demo 1 - Intro/Data Binding • Get AngularJS • Ng-app, ng-model • Magical {{}} • Filters • http://docs.angularjs.org/api/ng#filter

  7. Demo 2 - Controllers • Ng-controller • http://docs.angularjs.org/api/ng.$controller • Magical $scope • View model • Object context

  8. Demo 3 –Repeat and Filter • Directives • HTML Dom markers (attributes, css class, etc) • http://docs.angularjs.org/guide/directive • Ng-repeat • http://docs.angularjs.org/api/ng.directive:ngRepeat • Ng-filter • http://docs.angularjs.org/api/ng.filter:filter

  9. Demo 4 –More repeat and order • Order By • http://docs.angularjs.org/api/ng.filter:orderBy • Ng-repeat • http://docs.angularjs.org/api/ng.directive:ngRepeat • Ng-filter • http://docs.angularjs.org/api/ng.filter:filter

  10. Demo 5 – Functions • Custom Logic • Custom Filter function

  11. Demo Lou – A brief Interlude • Binding Images • And something really cool

  12. Demo 6 - Directives • Ng-show/ng-hide • http://docs.angularjs.org/api/ng.directive:ngShow#! • http://docs.angularjs.org/api/ng.directive:ngHide • Ng-click • http://docs.angularjs.org/api/ng.directive:ngClick • Directives • http://docs.angularjs.org/api/

  13. Demo 7 - Services • Encapsulate logic • Linked together via Dependency injection • http://docs.angularjs.org/guide/dev_guide.services.creating_services • chemistryApp.factory('chemistryData', function($http, $log, $q) { return { getChemistryData: function() {} }); • Promises - $q • http://docs.angularjs.org/api/ng.$q

  14. Demo 8 – Data binding • Create new elements!

  15. Questions

  16. Interested? • Mile of Music

  17. Thank you!! John Ptacek Skyline Technologies www.SkylineTechnologies.com jptacek@SkylineTechnologies.com @jptacek / www.jptacek.com

More Related