Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
AngularJS 101 - Everything you need to know to get started
Next
Download to read offline and view in fullscreen.

17

Share

Download to read offline

AngularJS Framework

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

AngularJS Framework

  1. 1. 1 AngularJS - CloudVis Technology AngularJS Framework Tăng Phú phutang@cloudvis.vn Technical Leader @ CloudVis Technology
  2. 2. 2 AngularJS - CloudVis Technology Agenda Introduction to AngularJS Anatomy of an AngularJS application Communicating with Servers Custom Directives (advanced)
  3. 3. 3 AngularJS - CloudVis Technology Introduction to AngularJS Angular Team @ Google
  4. 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
  5. 5. 5 AngularJS - CloudVis Technology Introduction to AngularJS hello-world.html hello_controller.js
  6. 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
  7. 7. 7 AngularJS - CloudVis Technology Introduction to AngularJS Data Binding
  8. 8. 8 AngularJS - CloudVis Technology Introduction to AngularJS Result Type: Hi
  9. 9. 9 AngularJS - CloudVis Technology Anatomy of an AngularJS application Structure – Basic workflow
  10. 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. 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. 12. 12 AngularJS - CloudVis Technology Basic startup flow Images from http://docs.angularjs.org/guide/concepts
  13. 13. 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. 14. 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. 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. 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. 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. 18. 18 AngularJS - CloudVis Technology Integration
  19. 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
  20. 20. 20 AngularJS - CloudVis Technology Communicating with Servers
  21. 21. 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. 22. 22 AngularJS - CloudVis Technology Communicating with Servers $resource (Dependencies on $http)
  23. 23. 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. 24. 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. 25. 25 AngularJS - CloudVis Technology Writing directives
  26. 26. 26 AngularJS - CloudVis Technology Wrapper DataTables DataTables (plug-in for jQuery)
  27. 27. 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. 28. 28 AngularJS - CloudVis Technology References http://angularjs.org/ Ebook: AngularJS, Oreilly, Apr 2013
  29. 29. 29 AngularJS - CloudVis Technology Thank you
  • LucianoMartorella

    Mar. 7, 2019
  • alexislawson1

    Feb. 19, 2015
  • dengwei

    Dec. 11, 2014
  • ssuser4a734e

    Oct. 15, 2014
  • HotRiver

    Aug. 28, 2014
  • moviesnmusic

    Aug. 25, 2014
  • boboy999

    Jul. 21, 2014
  • MohamedYoussef23

    Jun. 26, 2014
  • JamesKatarikawe

    Jun. 19, 2014
  • simplyajinkya

    Mar. 20, 2014
  • ssuserfe5f87

    Feb. 10, 2014
  • thidarutchaiyasuep

    Dec. 26, 2013
  • vickeybird

    Dec. 25, 2013
  • souzadfs

    Sep. 29, 2013
  • ilmsg

    Sep. 6, 2013
  • krisztianczene3

    Aug. 15, 2013
  • konda786

    Jul. 25, 2013

Views

Total views

11,693

On Slideshare

0

From embeds

0

Number of embeds

255

Actions

Downloads

618

Shares

0

Comments

0

Likes

17

×