• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS Framework
 

AngularJS Framework

on

  • 4,795 views

 

Statistics

Views

Total Views
4,795
Views on SlideShare
4,669
Embed Views
126

Actions

Likes
10
Downloads
312
Comments
1

20 Embeds 126

http://mosskaboss.blogspot.com 60
http://mosskaboss.blogspot.in 15
http://mosskaboss.blogspot.fr 8
http://mosskaboss.blogspot.co.nz 6
http://mosskaboss.blogspot.ca 5
http://mosskaboss.blogspot.dk 5
http://mosskaboss.blogspot.nl 5
http://mosskaboss.blogspot.co.uk 4
http://mosskaboss.blogspot.com.es 3
http://mosskaboss.blogspot.de 2
http://mosskaboss.blogspot.fi 2
http://mosskaboss.blogspot.ae 2
http://mosskaboss.blogspot.be 2
http://mosskaboss.blogspot.com.ar 1
http://mosskaboss.blogspot.no 1
https://www.google.com 1
http://mosskaboss.blogspot.com.au 1
http://mosskaboss.blogspot.it 1
http://mosskaboss.blogspot.ru 1
http://mosskaboss.blogspot.se 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Brilliant presentation explaining the internal architecture of Angular. It has given me the insight - and indeed the confidence - to develop my own directives. Many thanks for sharing.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AngularJS Framework AngularJS Framework Presentation Transcript

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