Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a AngularJS Basics
Semelhante a AngularJS Basics (20)
Último
Último (20)
AngularJS Basics
- 2. General • Javascript Framework • Angular = ng = &ng • Angular is full-featured SPA framework • Open-source web application framework • Originally developed in 2009 by Miško Hevery and Adam Abrons • Used as the business software behind an online JSON storage service • Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari) • Versions – Stable: 1.2.x – Beta: 1.3.0
- 3. Versions
- 4. AngularJS Statistics Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
- 5. ExtJs Usage Statistics Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
- 6. AngularJS Ext JS jQuery Feature detection[5] Yes Yes Yes DOM wrapped[20] Yes Yes Yes XMLHttpRequest Yes Yes Yes data retrieval [WebSocket] Yes Yes Server pushdata retrieval Yes Yes Other data retrieval Yes: XML, SOAP, AMF, Ext.Direct Yes: XML, HTML Drag and drop Yes Yes Simple visual effects Yes Yes Yes Animation / Yes Yes Yes advanced visual effects Event handling Yes Yes Yes Back button support / Yes With plugins[53] history management Input formwidgets & validation Yes Yes With plugins[59] Grid Yes With plugins[64] Hierarchical Tree Yes With plugins[74] Rich text editor No Yes With plugins[85] Autocompletiontools No Yes With plugins[90] HTMLgeneration tools No Yes Yes Comparison JavaScript Frameworks
- 7. AngularJS Ext JS jQuery Widgets themeable / skinnable Yes[97] Yes[99] GUI resizable panels and modal dialogs Yes With plugins GUI page layout Yes With plugin[108] Canvas support Yes With plugin[112] Mobile/tablet support (touch events) Yes Yes With plugin[119] Accessibility / Yes Yes Yes graceful degradation[124] ARIA compliant Yes Yes[131] Developer tools, Visual design Yes Yes[137][138] Offline storage[144] Yes With plugin[149] Cross-browser 2d Vector Graphics[152] Yes With plugin[155] Charting & Dashboard[158] Yes With plugin[163][164] RTL Support in UI Components Yes Depends on the plugin used Comparison JavaScript Frameworks
- 8. AngularJS - Goals & Concept • 100% Javascript • Declarative Programming paradigm (like SQL) • MVC • jqLight – the light version of jquery • Decouple DOM manipulation • Size AngularJS Backbone Ember Size 36K 6.4K 69K
- 9. Key features • Scope – object that refers to application model • MVC • Services • Two-way data binding • Directives • Filters • Validation • Testable • Dependency Injection
- 10. Basics
- 13. Directives
- 14. Directives • Markers on a DOM element • Tells to the compiler to attach a specific behavior to that DOM element • Custom directives definition is possible http://jsfiddle.net/roadprophet/DsvX6/
- 15. Most Useful Directives • ng-app • ng-bind • ng-model • ng-class • ng-controller • ng-switch, ng-if, ng-show, ng-hide • ng-repeat • ng-view
- 17. view Controller Model Binding to model MVC or MVW ?
- 18. Scope
- 19. Scope • $scope - expose the domain model to a view (template) • By assigning properties to scope instances, we can make new values available to a template for rendering. • Two types of scope – Inherited – Isolated (many scope models
- 23. view Controller Model Binding to model $scope.getName = function() { return $scope.name; } } <h1>Hello, {{ getName() }}! </h1> Scope
- 24. Controller
- 25. Controller • The primary responsibility of a controller is to initialize scope objects. – Providing initial model values – Augmenting $scope with UI-specific behavior (functions) • Controllers are regular JavaScript functions.
- 26. Application Scope Controller - Example Directives
- 28. Binding
- 29. Two-way data binding Renders model value Binding to model (variable)
- 31. • MoveIt – simplest http://plnkr.co/edit/hxLXgXd3Lvhm2FAVlYTY?p=preview
- 32. Filters
- 33. Filters • Formats the value of an expression for display to the user • Can be used in view templates, controllers or services • Custom Filter http://jsfiddle.net/CBgcP/413/
- 34. • MoveIt Custom Filter http://plnkr.co/edit/0wl7Jh47wRKIHpwNaAnE?p=preview • MoveIt Custom Filter with radio http://plnkr.co/edit/pMZN90UxpHoQ3FE4tQhR?p=preview
- 35. In computer technologythe term (usually shortened to booting) usually refers to the process of loading the basic software into the memory of a computer after power-on or general reset, especially the operating system which will then take care of loading other software as needed. In general parlance, bootstrapping usually refers to the starting of a self-sustaining process that is supposed to proceed without external input
- 36. Bootstrap in AngularJS • Create a new injector • Compile (Walk through the DOM and locate all directives) • Link – attach all the directives to scope.
- 37. Bootstrap
- 38. Dependency …
- 39. Dependency Injection • DI – Software Design Pattern that deals with how components get hold of their dependencies. • AngularJS is in charge of – Creating component – Resolving their dependencies – Providing them to other components as requested. • Injector knows to inject itself (first time it runs) • Injector will only create an instance of a service once (the next time it will use the cached one). • You can inject service into controller, directive or filter • Controllers cannot be injected into other things. Why?
- 40. DI in a Nutshell • How component can get a hold on its dependencies? – Typically using the new operator – Looking up, by referring to a global variable – Having the dependency passed to it where it is needed.
- 41. DI in a Nutshell • How component can get a hold on its dependencies? – Typically using the new operator – Looking up, by referring to a global variable – Having the dependency passed to it where it is needed. • Removes the responsibility of locating the dependency from the component
- 42. • However, SomeClass now is responsible of getting hold of the dependency on the code that constructs Greeter. • To manage the responsibility of dependency creation, each Angular application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies. DI in a Nutshell http://plnkr.co/edit/7IBuN94H9MMzere3QzDs?p=preview
- 43. DI in a Nutshell • Why the parameters order is not important? .toString()
- 45. Modules
- 46. Modules • The declarative process is easier to understand • Packaging code as reusable modules • The order of loading modules is not important or even parallel • Unit testing
- 47. Other functions • Lazy script loading • Validation • History • jasmine unit test
- 48. References
- 49. Resources • https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection • http://twilson63.github.io/codecamp-angularjs-reveal/#/4 • https://docs.angularjs.org/guide • “Mastering Web Application Development with AngularJS”, by Pavel Kozlovsky & Peter Bacon Darwin, August,2013
- 50. Thank you