29
1 AngularJS - CloudVis Technology AngularJS Framework Tăng Phú [email protected] Technical Leader @ CloudVis Technology

AngularJS Framework

Embed Size (px)

DESCRIPTION

Presentation at BarcampSaigon 2013 - RMIT 7th July

Citation preview

Page 1: AngularJS Framework

1AngularJS - CloudVis Technology

AngularJS Framework

Tăng Phú[email protected] Leader @ CloudVis Technology

Page 2: AngularJS Framework

2AngularJS - CloudVis Technology

Agenda

Introduction to AngularJSAnatomy of an AngularJS applicationCommunicating with ServersCustom Directives (advanced)

Page 3: AngularJS Framework

3AngularJS - CloudVis Technology

Introduction to AngularJS

Angular Team @ Google

Page 4: AngularJS Framework

4AngularJS - CloudVis Technology

Introduction to AngularJS

Experiences from building large web applications like Gmail, Maps, Canlendar …Open Source Javascript FrameworkUse

MVC architectureData bindingClient side templatesDependency injection

Page 5: AngularJS Framework

5AngularJS - CloudVis Technology

Introduction to AngularJShello-world.html

hello_controller.js

Page 6: AngularJS Framework

6AngularJS - CloudVis Technology

Introduction to AngularJS

Result Hello, World

A few interesting things Bind with no classes, no IDs in HTMLNo register eventshello_controller.js is plain JavaScript classAuto inject $scopeAuto init HelloController

Page 7: AngularJS Framework

7AngularJS - CloudVis Technology

Introduction to AngularJS

Data Binding

Page 8: AngularJS Framework

8AngularJS - CloudVis Technology

Introduction to AngularJS

Result

Type: Hi

Page 9: AngularJS Framework

9AngularJS - CloudVis Technology

Anatomy of an AngularJS application

Structure – Basic workflow

Page 10: AngularJS Framework

10AngularJS - 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

Page 11: AngularJS Framework

11AngularJS - CloudVis Technology

Basic startup flow

User requests a first pageLoad a index.html page with templateWait for the page fullly loaded, and looks ng-appScan binding and directives (what's directive?)Connect to server to load additional data (call ajax to get data)

Page 12: AngularJS Framework

12AngularJS - CloudVis Technology

Basic startup flow

Images from http://docs.angularjs.org/guide/concepts

Page 13: AngularJS Framework

13AngularJS - CloudVis Technology

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: <!-- directive: my-directive exp -->

Built-in Directiveng-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/

Page 14: AngularJS Framework

14AngularJS - CloudVis Technology

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>

Page 15: AngularJS Framework

15AngularJS - CloudVis Technology

What's Scope?

Scope as Data-ModelThe glue between application controller and the viewBoth controllers and directives have reference to the scope, but not to each other.

Page 16: AngularJS Framework

16AngularJS - CloudVis Technology

What's Controller?

A controller is a JavaScript function that is used to augment instances of angular ScopeUse controllers to

Set up the initial state of a scope object.Add behavior to the scope object.

Page 17: AngularJS Framework

17AngularJS - CloudVis Technology

What's View?

To generate the View (render a DOM), AngularJS gathers information from Template, applies Controller functions, link Model properties

Page 18: AngularJS Framework

18AngularJS - CloudVis Technology

Integration

Page 19: AngularJS Framework

19AngularJS - 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

Page 20: AngularJS Framework

20AngularJS - CloudVis Technology

Communicating with Servers

Page 21: AngularJS Framework

21AngularJS - CloudVis Technology

Communicating with Servers

AngularJS support$httpGeneral usage

Shortcut methods$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()

Page 22: AngularJS Framework

22AngularJS - CloudVis Technology

Communicating with Servers

$resource (Dependencies on $http)

Page 23: AngularJS Framework

23AngularJS - CloudVis Technology

Communicating with Servers

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)

Page 24: AngularJS Framework

24AngularJS - CloudVis Technology

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: <!-- directive: my-directive exp -->

Page 25: AngularJS Framework

25AngularJS - CloudVis Technology

Writing directives

Page 26: AngularJS Framework

26AngularJS - CloudVis Technology

Wrapper DataTables

DataTables(plug-in for jQuery)

Page 27: AngularJS Framework

27AngularJS - CloudVis Technology

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>

Page 28: AngularJS Framework

28AngularJS - CloudVis Technology

References

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

Page 29: AngularJS Framework

29AngularJS - CloudVis Technology

Thank you