Downloaded 34 times
Uploaded byTania Gonzales
AngularJS introduction
The document serves as an introduction to AngularJS, outlining its purpose as a structural framework for dynamic web applications and highlighting when to use it. It emphasizes best practices, such as keeping controllers and services independent of the DOM and maintaining readable scope, while also providing resources for further learning. Additionally, it discusses Angular's features like two-way data binding, dependency injection, and its MVC architecture.
AngularJS introduction
- 1. A n gu l a r J S S e s s i o n s INTRODUCTION
- 2. GOALS FOR TODAY What is AngularJS ? Conceptual overview 2 Why and when should I use it ? Testing aspects http://angularjs.org
- 3. CONCEPTUAL OVERVIEW AngularJSis a structural framework for dynamic 3 web applications.
- 4. CONCEPTUAL OVERVIEW 4 Like any abstraction, it comes at a cost of flexibility. Not every app is a good fit for Angular
- 5. CONCEPTUAL OVERVIEW 5 MVC done right
- 6. CONCEPTUAL OVERVIEW 6 A declarative user interface
- 7. CONCEPTUAL OVERVIEW 7 Data models are JavaScript objects SCOPES
- 8. CONCEPTUAL OVERVIEW 8 Behavior with directives. DOM manipulation where they belong! http://www.thoughtworks.com/radar/#/techniques/698 This involves aggressively restricting all DOM access (which usually translates to all jQuery usage) to a thin 'segregation layer'. One pleasant side-effect of this approach is that everything outside of that segregated DOM layer can be tested rapidly in isolation from the browser using a lean JavaScript engine such as node.js.
- 9. CONCEPTUAL OVERVIEW 9 Flexibility with Filters
- 10. CONCEPTUAL OVERVIEW 10 Context aware communication
- 11. CONCEPTUAL OVERVIEW 11 You will write less code. Yes you will Registering callbacks Manipulating HTML DOM programmatically Marshaling data to and from the UI Writing tons of initialization code just to get started
- 12. CONCEPTUAL OVERVIEW Designerstend to love it. HTML stays declarative 12
- 13. CONCEPTUAL OVERVIEW INVERSIONOF CONTROL through DEPENDENCY INJECTION PLUS GOOD TESTING/MOCKING TOOLS TESTABILITY! 13
- 14. CONCEPTUAL OVERVIEW 14 MODULE MODULE CONFIG FILTER DIRECTIVE FACTORY CONTROLLER ROUTES SERVICE PROVIDER VALUE
- 15. CONCEPTUAL OVERVIEW 15 SHOW TIME!
- 16. CONCEPTUAL OVERVIEW 16 DIRECTIVE DIRECTIVE "{{ name }}" is a binding expression!
- 17. CONCEPTUAL OVERVIEW TWOWAY DATA BINDING TEMPLATE VIEW COMPILE LINK MODEL 17
- 18. CONCEPTUAL OVERVIEW 18 This example contains bad practices. It was created for educational purposes only! FILTER
- 19. CONCEPTUAL OVERVIEW 19 MOMODDUULELE CONFIG PROVIDERS ROUTES CONTROLLER DIRECTIVE FACTORY FILTER SERVICE
- 20.
- 21. CONCEPTUAL OVERVIEW 21 Services Providers Directives Filters Config Controllers Factories
- 22.
- 23. CONCEPTUAL OVERVIEW 23 Services Providers Directives Filters Controllers Factories Config
- 24. CONCEPTUAL OVERVIEW 24 Services Providers Directives Filters Controllers Factories Config
- 25.
- 26. CONCEPTUAL OVERVIEW Ifyou want your function to be called like a normal function, use factory. If you want your function to be instantiated with the new operator, use service. 26
- 27. CONCEPTUAL OVERVIEW 27 Services Providers Directives Filters Controllers Factories Config
- 28. CONCEPTUAL OVERVIEW FeaturesFactory Service Value Constant Provider 28 Can have dependencies yes yes no no yes Object available in config phase no no no yes yes Can create functions / primitives yes no yes yes yes
- 29. CONCEPTUAL OVERVIEW 29 Services Providers Directives Filters Controllers Factories Config
- 30.
- 31. CONCEPTUAL OVERVIEW 31 Services Providers Directives Filters Controllers Factories Config
- 32.
- 33. CONCEPTUAL OVERVIEW 33 Services Providers Directives Filters Controllers Factories Config
- 34.
- 35. SOME BEST PRACTICES GOOD PRACTICES 35
- 36. SOME BEST PRACTICES Controllers and Services should not reference the DOM 36
- 37. SOME BEST PRACTICES Controllers should have view behavior 37
- 38. SOME BEST PRACTICES Services should have reusable logic, independent of the view 38
- 39. SOME BEST PRACTICES Scope should be read-only in the templates 39
- 40. SOME BEST PRACTICES Be careful with simple examples. ! Your architectures should reflect the system, not the frameworks you used in your system Uncle Bob - Screaming Architecture 40
- 41. 41 ECOSYSTEM NG(core) ngAnimate ngRoute ngResource ngCookies ngTouch ngSanitize ngMock http://ngmodules.org/
- 42. REFERENCES ▫︎ http://docs.angularjs.org/guide: Angular official documentation, it used to be very poor with very simples examples but is getting better in content although still using the same basics examples. 42 ! !▫︎https://github.com/angular/angular.js/wiki : Very good “articles" to understand better what angular is doing under the hood, like managing scopes and directives. ! !▫︎ http://www.thinkster.io/pick/GtaQ0oMGIl: "A Better Way to Learn AngularJS” : Very nice website that puts together a lot of good resources to learn AngularJs from scratch. ! !▫︎http://www.youtube.com/angularjs: AngularJs official youtube channel where they share and live-stream their presentations. !
- 43. REFERENCES ▫︎https://egghead.io/ :Videos with very simple explanation of the angular world such as directives, scope, controllers, very simple to start to understand what angular can do for you but no how it does it. ! !▫︎http://joelhooks.com/ : Blog where you can find some very interesting articles about AngularJs such as "Modeling Data and State in Your AngularJs Application” ! ! ▫︎AngularJs (O'Reilly, Brad Green & Shyam Seshadri): Nice book to go deeper into the AngularJs concepts and what it has to offer. ! 43 ! ▫︎Javascript: the good parts (O'Reilly, Douglas Crockford)
- 44. THANK YOU Questions? ! Renan Martins rmartins@thoughtworks.com ! Tania Gonzales tgonzales@thoughtworks.com