An introduction to angularjs development. It explains how to organise and test your code base

1. ANGULARJS
Adetunji Sunmonu
T e s t D r i v e n D e v e l o p m e n t

2. Any application that can be
written in JavaScript, will
eventually be written in
JavaScript.
2
Jeff Atwood

3. WHY ANGULARJS?
3

4. EMBEDDABLE
AngularJS works great with other technologies
4

5. POJO
Just JavaScript
5

6. TESTING
Easy to test
6

7. DEPENDENCY
INJECTION
Getting things to work effectively together
7

8. DATA BINDING
Automatic synchronization of data between model and the view components
8

9. STRUCTURE YOUR
CODE
Organize your code for efficiency.
9

10. PILES ON THE FLOOR
• Js/
● app.js
● controllers.js
● directives.js
● filters.js
● services.js
10

11. SOCK THE
DRAWER
■ Controllers
● LoginController.js
● RegistrationController.js
● ProductDetailCOntroller.js
■ Directive.js
■ Filters.js
■ Services/
● CartService.js
● UserService.js
● ProductService.js
11

12. MODULARITY
12
§ Cart/
§ CartService.js
§ CartController.js
§ Common/
§ Directive.js
§ Filter.js
§ Product/
§ ProductDetailController.js
§ ProductService.js
§ Search/
§ SerachResultsController
§ SearchResultsService.js
§ User/
§ LoginController.js
§ RegistrationController.js
§ UserService.js

13. 13

14. TOOLS
14

15. UNIT TEST
• Jasmine – JavaScript testing framework
o http://jasmine.github.io/1.3/introduction.html
• Mocha/chai/sinon
o http://visionmedia.github.io/mocha/ - test Framework
o http://chaijs.com/ - assertion library
o http://sinonjs.org/ - test spies, stubs and mocks
15

16. FUNCTIONAL/END-TO-END TEST
Ø Selenium
Ø http://docs.seleniumhq.org/
Ø Protractor
Ø https://github.com/angular/protractor
16

17. OTHER TOOLS
• Test Runner
o Karma - http://karma-runner.github.io/0.12/index.html
o Chutpzah - http://chutzpah.codeplex.com/
• Task Runner
o Grunt – http://gruntjs.com/
o Gulp - http://gulpjs.com/
17

18. START YOUR APP
18

19. CONTROLLERS
Set up the initial state of the scope object and add behaviour to it
19

20. CONTROLLER
20

21. VIEW
21

22. CONTROLLER TEST
22

23. SERVICES
23
To organize and share code across your application
Lazily instantiated
Singletons

24. SERVICES
24

25. SERVICE TEST
25

26. PROMISES
A promise represents the eventual result of an asynchronous operation
26

27. CALLBACK HELL!
27

28. WONDERS OF PROMISES
28

29. SERVICE USING PROMISES

30. CONTROLLER TEST

31. CONTROLLER TEST USING MOCKS

32. SERVICE TEST

33. THANK YOU
Questions or suggestions: