angularjs framework
Post on 12-Jan-2015
475 Views
Preview:
DESCRIPTION
TRANSCRIPT
1AngularJS - CloudVis Technology
AngularJS Framework
Tăng Phúphutang@cloudvis.vnTechnical Leader @ CloudVis Technology
2AngularJS - CloudVis Technology
Agenda
Introduction to AngularJSAnatomy of an AngularJS applicationCommunicating with ServersCustom Directives (advanced)
3AngularJS - CloudVis Technology
Introduction to AngularJS
Angular Team @ Google
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
5AngularJS - CloudVis Technology
Introduction to AngularJShello-world.html
hello_controller.js
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
7AngularJS - CloudVis Technology
Introduction to AngularJS
Data Binding
8AngularJS - CloudVis Technology
Introduction to AngularJS
Result
Type: Hi
9AngularJS - CloudVis Technology
Anatomy of an AngularJS application
Structure – Basic workflow
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
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)
12AngularJS - CloudVis Technology
Basic startup flow
Images from http://docs.angularjs.org/guide/concepts
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/
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>
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.
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.
17AngularJS - CloudVis Technology
What's View?
To generate the View (render a DOM), AngularJS gathers information from Template, applies Controller functions, link Model properties
18AngularJS - CloudVis Technology
Integration
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
20AngularJS - CloudVis Technology
Communicating with Servers
21AngularJS - CloudVis Technology
Communicating with Servers
AngularJS support$httpGeneral usage
Shortcut methods$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()
22AngularJS - CloudVis Technology
Communicating with Servers
$resource (Dependencies on $http)
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)
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 -->
25AngularJS - CloudVis Technology
Writing directives
26AngularJS - CloudVis Technology
Wrapper DataTables
DataTables(plug-in for jQuery)
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>
28AngularJS - CloudVis Technology
References
http://angularjs.org/Ebook: AngularJS, Oreilly, Apr 2013
29AngularJS - CloudVis Technology
Thank you
top related