AngularJS Framework
18 likes11,758 views
The document discusses AngularJS and provides an introduction and overview. It describes AngularJS as an open source JavaScript framework developed by Google that uses MVC architecture and data binding. It discusses key concepts like directives, scopes, controllers and views. It also covers communicating with servers using $http and $resource, and provides an example of writing a custom directive to wrap the jQuery DataTables plugin.
AngularJS Framework
- 1. 1 AngularJS - CloudVis Technology AngularJS Framework Tăng Phú [email protected] Technical Leader @ CloudVis Technology
- 2. 2 AngularJS - CloudVis Technology Agenda Introduction to AngularJS Anatomy of an AngularJS application Communicating with Servers Custom Directives (advanced)
- 3. 3 AngularJS - CloudVis Technology Introduction to AngularJS Angular Team @ Google
- 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 AngularJS - CloudVis Technology Introduction to AngularJS hello-world.html hello_controller.js
- 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 AngularJS - CloudVis Technology Introduction to AngularJS Data Binding
- 8. 8 AngularJS - CloudVis Technology Introduction to AngularJS Result Type: Hi
- 9. 9 AngularJS - CloudVis Technology Anatomy of an AngularJS application Structure – Basic workflow
- 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 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 AngularJS - CloudVis Technology Basic startup flow Images from http://docs.angularjs.org/guide/concepts
- 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 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 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 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 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 AngularJS - CloudVis Technology Integration
- 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 AngularJS - CloudVis Technology Communicating with Servers
- 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 AngularJS - CloudVis Technology Communicating with Servers $resource (Dependencies on $http)
- 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 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 AngularJS - CloudVis Technology Writing directives
- 26. 26 AngularJS - CloudVis Technology Wrapper DataTables DataTables (plug-in for jQuery)
- 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 AngularJS - CloudVis Technology References http://angularjs.org/ Ebook: AngularJS, Oreilly, Apr 2013
- 29. 29 AngularJS - CloudVis Technology Thank you