4. 4
AngularJS - CloudVis Technology
Introduction to AngularJS
Experiences from building large web applications
like Gmail, Maps, Canlendar …
Open Source Javascript Framework
Use
MVC architecture
Data binding
Client side templates
Dependency injection
6. 6
AngularJS - CloudVis Technology
Introduction to AngularJS
Result Hello, World
A few interesting things
Bind with no classes, no IDs in HTML
No register events
hello_controller.js is plain JavaScript class
Auto inject $scope
Auto init HelloController
9. 9
AngularJS - CloudVis Technology
Anatomy of an AngularJS application
Structure – Basic workflow
10. 10
AngularJS - CloudVis Technology
Anatomy of an AngularJS application
● Line 2: define a part of DOM which is managed by Angular
● Line 5, 6: import library and your code
● Line 9: define scope (what's scope?) and bind with
HelloController, ng-controller attribute
● Line 10: define data with ng-model attribute
● Line 11: display text with {{ }}
● Line 12: behavior with ng-click attribute
11. 11
AngularJS - CloudVis Technology
Basic startup flow
User requests a first page
Load a index.html page with template
Wait for the page fullly loaded, and looks ng-app
Scan binding and directives (what's directive?)
Connect to server to load additional data (call ajax to get
data)
15. 15
AngularJS - CloudVis Technology
What's Scope?
Scope as Data-Model
The glue between application controller and the view
Both controllers and directives have reference to the scope,
but not to each other.
16. 16
AngularJS - CloudVis Technology
What's Controller?
A controller is a JavaScript function that is used to augment
instances of angular Scope
Use controllers to
Set up the initial state of a scope object.
Add behavior to the scope object.
17. 17
AngularJS - CloudVis Technology
What's View?
To generate the View (render a DOM), AngularJS gathers
information from Template, applies Controller functions, link
Model properties
19. 19
AngularJS - CloudVis Technology
Data Binding
In the Angular implementation of MVC, the view has
knowledge of both the model and the controller.
The view knows about the model where two-way data-binding
occurs
Images from http://docs.angularjs.org/guide/dev_guide.templates.databinding
Classical Template Systems Angular Templates