AngularJS Framework

1
AngularJS - CloudVis Technology
AngularJS Framework
Tăng Phú
phutang@cloudvis.vn
Technical Leader @ CloudVis Technology

2
Agenda
Introduction to AngularJS
Anatomy of an AngularJS application
Communicating with Servers
Custom Directives (advanced)

3
Angular Team @ Google

4
Experiences from building large web applications
like Gmail, Maps, Canlendar …
Open Source Javascript Framework
Use
MVC architecture
Data binding
Client side templates
Dependency injection

5
hello-world.html
hello_controller.js

6
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

7
Data Binding

8
Result
Type: Hi

9
Structure – Basic workflow

10
● 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
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)

12
Basic startup flow
Images from http://docs.angularjs.org/guide/concepts

13
What's Directive?
Kinds of Directive
E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: 
Built-in Directive
ng-app (A)
ng-controller (A, C)
ng-model (A, C)
ng-change (E, A)
ng-click (A, C)
ng-repeat (A, C)
….
Ref: http://docs.angularjs.org/api/

14
Directive Example
<p ng-bind="greeting"></p>
<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>
<form ng-submit="requestFunding()"
ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="startingEstimate">
Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>

15
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
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
What's View?
To generate the View (render a DOM), AngularJS gathers
information from Template, applies Controller functions, link
Model properties

18
Integration

19
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

20

21
AngularJS support
$http
General usage
Shortcut methods
$http.get() $http.head() $http.post() $http.put()
$http.delete() $http.jsonp()

22
$resource (Dependencies on $http)

23
var data = Data.get({id:123}, function() {
data.isDefault = true;
data.$save();
});
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
$resource (Dependencies on $http)

24
Custom Directives (advanced)
E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment:

25
Writing directives

26
Wrapper DataTables
DataTables
(plug-in for jQuery)

27
Wrapper DataTables
DataTables (plug-in for jQuery)
Import DataTables jQuery
<script
type="text/javascript"
src="jquery.dataTables.js">
</script>
In Template
<cv-table
ajax-url="/data/users"
page-size="50">
</cv-table>

28
References
http://angularjs.org/
Ebook: AngularJS, Oreilly, Apr 2013

29
Thank you

AngularJS Framework

More Related Content

What's hot

Similar to AngularJS Framework

More from Barcamp Saigon

Recently uploaded

AngularJS Framework