0
A n g u l a r J S S e s s i o n s 
INTRODUCTION
GOALS FOR TODAY 
What is AngularJS ? Conceptual overview 
2 
Why and when should I use it ? 
Testing aspects 
http://angul...
CONCEPTUAL OVERVIEW 
AngularJS is a structural framework for dynamic 
3 
web applications.
CONCEPTUAL OVERVIEW 
4 
Like any abstraction, it comes at a cost of 
flexibility. Not every app is a good fit for Angular
CONCEPTUAL OVERVIEW 
5 
MVC done right
CONCEPTUAL OVERVIEW 
6 
A declarative user interface
CONCEPTUAL OVERVIEW 
7 
Data models are JavaScript objects 
SCOPES
CONCEPTUAL OVERVIEW 
8 
Behavior with directives. 
DOM manipulation where they belong! 
http://www.thoughtworks.com/radar/...
CONCEPTUAL OVERVIEW 
9 
Flexibility with Filters
CONCEPTUAL OVERVIEW 
10 
Context aware communication
CONCEPTUAL OVERVIEW 
11 
You will write less code. 
Yes you will 
Registering callbacks Manipulating HTML DOM programmatic...
CONCEPTUAL OVERVIEW 
Designers tend to love it. HTML stays declarative 
12
CONCEPTUAL OVERVIEW 
INVERSION OF CONTROL 
through 
DEPENDENCY INJECTION 
PLUS GOOD TESTING/MOCKING TOOLS 
TESTABILITY! 
1...
CONCEPTUAL OVERVIEW 
14 
MODULE MODULE 
CONFIG FILTER DIRECTIVE FACTORY CONTROLLER 
ROUTES SERVICE 
PROVIDER 
VALUE
CONCEPTUAL OVERVIEW 
15 
SHOW TIME!
CONCEPTUAL OVERVIEW 
16 
DIRECTIVE 
DIRECTIVE 
"{{ name }}" is a binding expression!
CONCEPTUAL OVERVIEW 
TWO WAY DATA BINDING 
TEMPLATE 
VIEW 
COMPILE 
LINK 
MODEL 
17
CONCEPTUAL OVERVIEW 
18 
This example contains bad 
practices. It was created for 
educational purposes only! 
FILTER
CONCEPTUAL OVERVIEW 
19 
MOMODDUULELE 
CONFIG 
PROVIDERS 
ROUTES CONTROLLER 
DIRECTIVE FACTORY 
FILTER 
SERVICE
CONCEPTUAL OVERVIEW 
20
CONCEPTUAL OVERVIEW 
21 
Services Providers 
Directives 
Filters 
Config 
Controllers 
Factories
CONTROLLERS 
22
CONCEPTUAL OVERVIEW 
23 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
CONCEPTUAL OVERVIEW 
24 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
SERVICES/FACTORIES 
25
CONCEPTUAL OVERVIEW 
If you want your function to be called like a 
normal function, use factory. If you want your 
functi...
CONCEPTUAL OVERVIEW 
27 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
CONCEPTUAL OVERVIEW 
Features Factory Service Value Constant Provider 
28 
Can have dependencies yes yes no no yes 
Object...
CONCEPTUAL OVERVIEW 
29 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
DIRECTIVES 
30
CONCEPTUAL OVERVIEW 
31 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
32
CONCEPTUAL OVERVIEW 
33 
Services Providers 
Directives 
Filters 
Controllers 
Factories Config
CONFIG FILE 
34
SOME BEST PRACTICES 
GOOD PRACTICES 
35
SOME BEST PRACTICES 
Controllers and Services should not 
reference the DOM 
36
SOME BEST PRACTICES 
Controllers should have view behavior 
37
SOME BEST PRACTICES 
Services should have reusable logic, independent 
of the view 
38
SOME BEST PRACTICES 
Scope should be read-only in the templates 
39
SOME BEST PRACTICES 
Be careful with simple examples. 
! 
Your architectures should reflect the system, 
not the framework...
41 
ECOSYSTEM 
NG (core) ngAnimate 
ngRoute ngResource 
ngCookies 
ngTouch 
ngSanitize 
ngMock 
http://ngmodules.org/
REFERENCES 
▫︎ http://docs.angularjs.org/guide : Angular official documentation, it used to 
be very poor with very simple...
REFERENCES 
▫︎https://egghead.io/ : Videos with very simple explanation of the angular world 
such as directives, scope, c...
THANK YOU 
Questions? 
! 
Renan Martins 
rmartins@thoughtworks.com 
! 
Tania Gonzales 
tgonzales@thoughtworks.com
Upcoming SlideShare
Loading in...5
×

Angular js introduction by Tania Gonzales

670

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×