Your SlideShare is downloading. ×
AngularJS introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS introduction

620
views

Published on

AngularJS presentation made at ThoughtWorks Brasil. …

AngularJS presentation made at ThoughtWorks Brasil.
Code is available in github.
https://github.com/taniadgv/contactworks

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
620
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A n g u 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 AngularJS is 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 Designers tend to love it. HTML stays declarative 12
  • 13. CONCEPTUAL OVERVIEW INVERSION OF 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 TWO WAY 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. CONCEPTUAL OVERVIEW 20
  • 21. CONCEPTUAL OVERVIEW 21 Services Providers Directives Filters Config Controllers Factories
  • 22. CONTROLLERS 22
  • 23. CONCEPTUAL OVERVIEW 23 Services Providers Directives Filters Controllers Factories Config
  • 24. CONCEPTUAL OVERVIEW 24 Services Providers Directives Filters Controllers Factories Config
  • 25. SERVICES/FACTORIES 25
  • 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. CONCEPTUAL OVERVIEW 27 Services Providers Directives Filters Controllers Factories Config
  • 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. CONCEPTUAL OVERVIEW 29 Services Providers Directives Filters Controllers Factories Config
  • 30. DIRECTIVES 30
  • 31. CONCEPTUAL OVERVIEW 31 Services Providers Directives Filters Controllers Factories Config
  • 32. 32
  • 33. CONCEPTUAL OVERVIEW 33 Services Providers Directives Filters Controllers Factories Config
  • 34. CONFIG FILE 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