Introduction to AngularJS

Introduction to AngularJS

• 1.
  13/05/12 Jumping Bean AngularJS– Teaching HTML New Tricks By Mark Clarke
• 2.
  13/05/12 Jumping Bean AboutMe ➔ Open source solutions integrator, ➔ Java developer, ➔ Drupal developer, ➔ Love Linux, ➔ Work at Jumping Bean ➔ Www.jumpingbean.co.za ➔ G+ - Jumping Bean ➔ Social Networks ➔ Twitter @mxc4 ➔ G+ MClarke4@gmail.com
• 3.
  13/05/12 Jumping Bean TypicalWeb Application ➔ Pre Web 2.0 ➔ Template language and model merged server side and sent to client ➔ Web 2.0 ➔ jQuery – Dom manipulation, ➔ InnerHTML manipulation ➔ Model & view not separated ➔ Application logic mixed with presentation logic
• 4.
  13/05/12 Jumping Bean Whatis AngularJS? ➔ A javascript MVC framework, ➔ Run entirely in browser, ➔ Decouple DOM manipulation from Application logic, ➔ Built with testing in mind, ➔ Declarative approach for UI (HTML) ➔ Imperative approach for application logic (Javascript)
• 5.
  13/05/12 Jumping Bean Whatis MVC? HTML => <= Javascript <= Object literal
• 6.
  13/05/12 Jumping Bean AngularJSMVC ➔ Declarative UI ➔ HTML, ➔ Angular directives, ➔ DSL to create new tags ➔ Expressions {{ }}
• 7.
  13/05/12 Jumping Bean AngularJSMVC ➔ Javascript controller, ➔ Does not reference view directly ➔ Dependency injection ➔ Explained later
• 8.
  13/05/12 Jumping Bean ➔$scope is a container of your model (application state), ➔ Single source of truth for application state, ➔ Dependency injected by framework into controller, ➔ $scope provide execution context for expressions AngularJS MVC
• 9.
  13/05/12 Jumping Bean ViewKey Concepts ➔ Directives ➔ New tags, attributes or classes that define new functionality ➔ Expressions ➔ Binding syntax - {{ }} refer to model elements and updated automatically. Framework keeps UI and model in sync ➔ Filters ➔ Format data for display
• 10.
  13/05/12 Jumping Bean ControllerKey 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.
  13/05/12 Jumping Bean ControllerKey Concepts ➔ Naming convention ➔ Use camel case in javascript code, declaring directives etc (ngRepeat) ➔ Use snake case in html (ng-repeat)
• 12.
  13/05/12 Jumping Bean AngularJS- MVC
• 13.
  13/05/12 Jumping Bean Demos Enoughtheory 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.
  13/05/12 Jumping Bean Demos ➔Demo 5 ➔ Dependency injection hxr service $http
• 15.
  13/05/12 Jumping Bean Howdoes this magic work? ➔ Life cycle of AngularJS app ➔ Startup/Bootstrapping of application ➔ Runtime processing of application
• 16.
  13/05/12 Jumping Bean Howit 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.
  13/05/12 Jumping Bean Howit Works - Startup
• 18.
  13/05/12 Jumping Bean Howit works - Runtime ➔ After dom compilation,normal browser events fire and call back to AngularJS ➔ AngularJS has internal event loop, ➔ All callbacks wrapped in $apply call, ➔ $apply calls $digest which checks for changes in model and fires update events
• 19.
  13/05/12 Jumping Bean Howit works - Runtime
• 20.
  13/05/12 Jumping Bean Demo ➔Demo 6 ➔ How to write your own directive ➔ DSL
• 21.
  13/05/12 Jumping Bean AngularApplication Development ➔ Standard structure recommended for application layout ➔ Angular-seed project provides base structure ➔ Single page application with ngView directive and partials
• 22.
  13/05/12 Jumping Bean AngularJSis Extensable ➔ Can create own ➔ Filters ➔ Directives ➔ Services ➔ Useful for CRUD applications ➔ Can still use jQuery for DOM manipulation
• 23.
  13/05/12 Jumping Bean AngularJSModules ➔ Modules are containers for angularjs components ➔ Used to define services, factories, directives and application configuration