Introduction to AngularJS
8 likes3,453 views
This document discusses AngularJS, a JavaScript MVC framework. It begins with an introduction to typical web applications and how AngularJS differs by separating the model and view. The key concepts of AngularJS MVC like directives, expressions, filters and controllers are explained. Several demos are provided to illustrate AngularJS features in action. The document also explains how AngularJS works at startup and runtime before concluding with recommendations for application structure and extensibility.
Ad
More Related Content
What's hot (20)
Similar to Introduction to AngularJS (20)
Ad
More from Jumping Bean (15)
Ad
Recently uploaded (20)
Introduction to AngularJS
- 1. 13/05/12 Jumping Bean AngularJS – Teaching HTML New Tricks By Mark Clarke
- 2. 13/05/12 Jumping Bean About Me ➔ 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+ [email protected]
- 3. 13/05/12 Jumping Bean Typical Web 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 What is 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 What is MVC? HTML => <= Javascript <= Object literal
- 6. 13/05/12 Jumping Bean AngularJS MVC ➔ Declarative UI ➔ HTML, ➔ Angular directives, ➔ DSL to create new tags ➔ Expressions {{ }}
- 7. 13/05/12 Jumping Bean AngularJS MVC ➔ 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 View Key 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 Controller 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. 13/05/12 Jumping Bean Controller Key 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 Enough 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. 13/05/12 Jumping Bean Demos ➔ Demo 5 ➔ Dependency injection hxr service $http
- 15. 13/05/12 Jumping Bean How does this magic work? ➔ Life cycle of AngularJS app ➔ Startup/Bootstrapping of application ➔ Runtime processing of application
- 16. 13/05/12 Jumping Bean How 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. 13/05/12 Jumping Bean How it Works - Startup
- 18. 13/05/12 Jumping Bean How it 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 How it works - Runtime
- 20. 13/05/12 Jumping Bean Demo ➔ Demo 6 ➔ How to write your own directive ➔ DSL
- 21. 13/05/12 Jumping Bean Angular Application 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 AngularJS is Extensable ➔ Can create own ➔ Filters ➔ Directives ➔ Services ➔ Useful for CRUD applications ➔ Can still use jQuery for DOM manipulation
- 23. 13/05/12 Jumping Bean AngularJS Modules ➔ Modules are containers for angularjs components ➔ Used to define services, factories, directives and application configuration