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

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