Download - Introduction to AngularJS
![Page 1: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/1.jpg)
13/05/12 Jumping Bean
AngularJS – Teaching HTML New TricksBy Mark Clarke
![Page 2: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/2.jpg)
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]
![Page 3: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/4.jpg)
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)
![Page 5: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/5.jpg)
13/05/12 Jumping Bean
What is MVC?
HTML =><= Javascript
<= Object literal
![Page 6: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/6.jpg)
13/05/12 Jumping Bean
AngularJS MVC➔ Declarative UI
➔ HTML,➔ Angular directives,
➔ DSL to create new tags➔ Expressions {{ }}
![Page 7: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/7.jpg)
13/05/12 Jumping Bean
AngularJS MVC➔ Javascript controller,➔ Does not reference view
directly➔ Dependency injection
➔ Explained later
![Page 8: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/11.jpg)
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)
![Page 13: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/13.jpg)
13/05/12 Jumping Bean
DemosEnough 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
![Page 14: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/14.jpg)
13/05/12 Jumping Bean
Demos➔ Demo 5
➔ Dependency injection hxr service $http
![Page 15: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/15.jpg)
13/05/12 Jumping Bean
How does this magic work?➔ Life cycle of AngularJS app
➔ Startup/Bootstrapping of application➔ Runtime processing of application
![Page 16: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/16.jpg)
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
![Page 18: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/18.jpg)
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
![Page 20: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/20.jpg)
13/05/12 Jumping Bean
Demo➔ Demo 6
➔ How to write your own directive➔ DSL
![Page 21: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to AngularJS](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554f6d5bb4c905c8088b533b/html5/thumbnails/23.jpg)
13/05/12 Jumping Bean
AngularJS Modules
➔ Modules are containers for angularjs components
➔ Used to define services, factories, directives and application configuration