Angular js introduction by Tania Gonzales

1,570 views

Published on

AngularJS Introduction Presentation.
It covers some basic concepts around AngularJS like controllers, services, etc and some best practices learned along the way.
Code is available in github:
https://github.com/taniadgv/contactworks

Published in: Technology

Angular js introduction by Tania Gonzales

  1. 1. A n g u l a r J S S e s s i o n s INTRODUCTION
  2. 2. GOALS FOR TODAY What is AngularJS ? Conceptual overview 2 Why and when should I use it ? Testing aspects http://angularjs.org
  3. 3. CONCEPTUAL OVERVIEW AngularJS is a structural framework for dynamic 3 web applications.
  4. 4. CONCEPTUAL OVERVIEW 4 Like any abstraction, it comes at a cost of flexibility. Not every app is a good fit for Angular
  5. 5. CONCEPTUAL OVERVIEW 5 MVC done right
  6. 6. CONCEPTUAL OVERVIEW 6 A declarative user interface
  7. 7. CONCEPTUAL OVERVIEW 7 Data models are JavaScript objects SCOPES
  8. 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. 9. CONCEPTUAL OVERVIEW 9 Flexibility with Filters
  10. 10. CONCEPTUAL OVERVIEW 10 Context aware communication
  11. 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. 12. CONCEPTUAL OVERVIEW Designers tend to love it. HTML stays declarative 12
  13. 13. CONCEPTUAL OVERVIEW INVERSION OF CONTROL through DEPENDENCY INJECTION PLUS GOOD TESTING/MOCKING TOOLS TESTABILITY! 13
  14. 14. CONCEPTUAL OVERVIEW 14 MODULE MODULE CONFIG FILTER DIRECTIVE FACTORY CONTROLLER ROUTES SERVICE PROVIDER VALUE
  15. 15. CONCEPTUAL OVERVIEW 15 SHOW TIME!
  16. 16. CONCEPTUAL OVERVIEW 16 DIRECTIVE DIRECTIVE "{{ name }}" is a binding expression!
  17. 17. CONCEPTUAL OVERVIEW TWO WAY DATA BINDING TEMPLATE VIEW COMPILE LINK MODEL 17
  18. 18. CONCEPTUAL OVERVIEW 18 This example contains bad practices. It was created for educational purposes only! FILTER
  19. 19. CONCEPTUAL OVERVIEW 19 MOMODDUULELE CONFIG PROVIDERS ROUTES CONTROLLER DIRECTIVE FACTORY FILTER SERVICE
  20. 20. CONCEPTUAL OVERVIEW 20
  21. 21. CONCEPTUAL OVERVIEW 21 Services Providers Directives Filters Config Controllers Factories
  22. 22. CONTROLLERS 22
  23. 23. CONCEPTUAL OVERVIEW 23 Services Providers Directives Filters Controllers Factories Config
  24. 24. CONCEPTUAL OVERVIEW 24 Services Providers Directives Filters Controllers Factories Config
  25. 25. SERVICES/FACTORIES 25
  26. 26. CONCEPTUAL OVERVIEW If you 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. 27. CONCEPTUAL OVERVIEW 27 Services Providers Directives Filters Controllers Factories Config
  28. 28. CONCEPTUAL OVERVIEW Features Factory 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. 29. CONCEPTUAL OVERVIEW 29 Services Providers Directives Filters Controllers Factories Config
  30. 30. DIRECTIVES 30
  31. 31. CONCEPTUAL OVERVIEW 31 Services Providers Directives Filters Controllers Factories Config
  32. 32. 32
  33. 33. CONCEPTUAL OVERVIEW 33 Services Providers Directives Filters Controllers Factories Config
  34. 34. CONFIG FILE 34
  35. 35. SOME BEST PRACTICES GOOD PRACTICES 35
  36. 36. SOME BEST PRACTICES Controllers and Services should not reference the DOM 36
  37. 37. SOME BEST PRACTICES Controllers should have view behavior 37
  38. 38. SOME BEST PRACTICES Services should have reusable logic, independent of the view 38
  39. 39. SOME BEST PRACTICES Scope should be read-only in the templates 39
  40. 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. 41 ECOSYSTEM NG (core) ngAnimate ngRoute ngResource ngCookies ngTouch ngSanitize ngMock http://ngmodules.org/
  42. 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. 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. 44. THANK YOU Questions? ! Renan Martins rmartins@thoughtworks.com ! Tania Gonzales tgonzales@thoughtworks.com

×