Introduction to AngularJS


Published on

Slides from our presentation at GDG Barcamp 11th May 2013 in Johannesburg. Will post code examples to GIT hub.

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to AngularJS

  1. 1. 13/05/12 Jumping BeanAngularJS – Teaching HTML New TricksBy Mark Clarke
  2. 2. 13/05/12 Jumping BeanAbout Me➔ Open source solutions integrator,➔ Java developer,➔ Drupal developer,➔ Love Linux,➔ Work at Jumping Bean➔➔ G+ - Jumping Bean➔ Social Networks➔ Twitter @mxc4➔ G+
  3. 3. 13/05/12 Jumping BeanTypical Web Application➔ Pre Web 2.0➔ Template language and model merged serverside and sent to client➔ Web 2.0➔ jQuery – Dom manipulation,➔ InnerHTML manipulation➔ Model & view not separated➔ Application logic mixed with presentation logic
  4. 4. 13/05/12 Jumping BeanWhat is AngularJS?➔ A javascript MVC framework,➔ Run entirely in browser,➔ Decouple DOM manipulation from Applicationlogic,➔ Built with testing in mind,➔ Declarative approach for UI (HTML)➔ Imperative approach for application logic(Javascript)
  5. 5. 13/05/12 Jumping BeanWhat is MVC?HTML =><= Javascript<= Object literal
  6. 6. 13/05/12 Jumping BeanAngularJS MVC➔ Declarative UI➔ HTML,➔ Angular directives,➔ DSL to create new tags➔ Expressions {{ }}
  7. 7. 13/05/12 Jumping BeanAngularJS MVC➔Javascript controller,➔ Does not reference viewdirectly➔ Dependency injection➔ Explained later
  8. 8. 13/05/12 Jumping Bean➔ $scope is a container of yourmodel (application state),➔Single source of truth forapplication state,➔ Dependency injected byframework into controller,➔ $scope provide execution contextfor expressionsAngularJS MVC
  9. 9. 13/05/12 Jumping BeanView Key Concepts➔ Directives➔ New tags, attributes or classes that define newfunctionality➔ Expressions➔ Binding syntax - {{ }} refer to model elements andupdated automatically. Framework keeps UI andmodel in sync➔ Filters➔ Format data for display
  10. 10. 13/05/12 Jumping BeanController Key Concepts➔ AngularJS namespace $,➔ Dependency injection➔ Require services are provided by the framework➔ $scope, $location, $window $hxr etc➔ Can create own services for dependency injection,➔ Set up model,➔ Create event listener functions
  11. 11. 13/05/12 Jumping BeanController Key Concepts➔ Naming convention➔ Use camel case in javascript code,declaring directives etc (ngRepeat)➔ Use snake case in html (ng-repeat)
  12. 12. 13/05/12 Jumping BeanAngularJS - MVC
  13. 13. 13/05/12 Jumping BeanDemosEnough theory time for some demos➔ Demo 1➔ Basic ng-App, no controller➔ Demo 1a➔ Some more built-in directives, form validation,show.hide➔ Demo 2➔Controller and ng-repeat directive➔ Demo 3➔ Filter demo➔ Demo 4➔ Filter and orderBy
  14. 14. 13/05/12 Jumping BeanDemos➔ Demo 5➔ Dependency injection hxr service $http
  15. 15. 13/05/12 Jumping BeanHow does this magic work?➔ Life cycle of AngularJS app➔ Startup/Bootstrapping of application➔ Runtime processing of application
  16. 16. 13/05/12 Jumping BeanHow it Works - Startup➔ Loading page - Bootstrapping➔ On DOMContentLoaded Event➔ Find the root of the angular application (ng-app)➔ DOM Compilation➔ Compile: transverse DOM to find directives &expressions➔ Set up watches, add listeners/callbacks etc➔ Link: Combine directives with $scope (model)and produce view
  17. 17. 13/05/12 Jumping BeanHow it Works - Startup
  18. 18. 13/05/12 Jumping BeanHow it works - Runtime➔ After dom compilation,normal browserevents fire and call back to AngularJS➔ AngularJS has internal event loop,➔ All callbacks wrapped in $apply call,➔ $apply calls $digest which checks forchanges in model and fires updateevents
  19. 19. 13/05/12 Jumping BeanHow it works - Runtime
  20. 20. 13/05/12 Jumping BeanDemo➔ Demo 6➔ How to write your own directive➔ DSL
  21. 21. 13/05/12 Jumping BeanAngular ApplicationDevelopment➔ Standard structure recommended forapplication layout➔ Angular-seed project provides basestructure➔ Single page application with ngViewdirective and partials
  22. 22. 13/05/12 Jumping BeanAngularJS is Extensable➔ Can create own➔ Filters➔ Directives➔ Services➔ Useful for CRUD applications➔ Can still use jQuery for DOMmanipulation
  23. 23. 13/05/12 Jumping BeanAngularJS Modules➔ Modules are containers for angularjscomponents➔ Used to define services, factories,directives and application configuration
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.