There is a lot of positive buzz about angular in front end js framework community - directives, two-way bindings, 'by google'. There is as well some critic - it's bigger then backbone, unlike ember it does dirty checking. In this presentation we will take a look on 'the angular way' the set of practice that is necessary to know if we want to fairy judge angular. So we will take a look on: * TDD and unit tests with karma test runner * yo generators * grunt server * angular separation of concerns

1. The angular way
Meet js summit Gdańsk 19 October 2013

2. Who am I?
● Marcin Wosinek
● 5 years IT experience
- WebDev: Javascript
- C# dev: UnitTests
● Currently js contractor in Roche in Poznan

3. You?

4. The buzz

5. Reality

6. Common pitfall

9. Angular strong points
● single page apps
● forms
● REST

10. Note

11. Angular’s domain

12. Angular’s domain NOT

13. Angular MV*
Model
Services
Controller
Directives
View

14. Concerns separation
Model
Business logic
Services
Infrast. logic
Controller
View logic
Directives
DOM manip.
View
Declarative binding

15. Directives
<ANY ng-show="{expression}">
<input ng-model="variable">
<ng-view> <any ng-view>
<ANY ng-class="{expression}">
<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
...
<ANY ng-switch-default>...</ANY>
</ANY>

16. Module A
Modules - idea
●
●
●
●
directives
services
controllers
filters
file-a.js
Module B
START
●
●
●
●
directives
services
controllers
filters
file-b.js

17. Modules - splitting code
angular ui
angular core
other lib
app core
user page
admin page

18. Testability
function HelloCtrl($scope, $window, $log) {
$scope.message = 'Display me in view';
…
}
<div ng-repeat="project in projects |
filter:search | orderBy:'name'"> </div>
<form ng-submit="addTodo()">
<input ng-model="todoText" />
</form>

19. Keeping code testable
●
●
●
●
DOM
services
$window
TDD FTW

20. Karma

21. Test frameworks

22. Yeoman

23. Grunt

24. Yo generators

25. Materials
●
●
●
●
egghead io
youtube/angularjs
ng-module
books (disclaimer: neither of them I've read):
○ Mastering Web Application Development
with AngularJS
○ AngularJS from O'Reilly

26. AngularJs community
● fb.com/groups/angularjs.polska
● ng-camp?

27. Summary

28. Questions
?

29. Contact
● marcin.wosinek@gmail.com
● @MarcinWosinek
● links, slides, notes and (hopefully) video:
http://bit.ly/ng-summit

30. Credits
●
●
●
●
●
●
●
●
Audience photo: http://www.flickr.com/photos/dougbelshaw/5604047370/
Bees photo: http://www.flickr.com/photos/theseanster93/4056815767/
hammer & screw: http://www.flickr.com/photos/justinbaeder/5317820857
ie: http://en.wikipedia.org/wiki/File:IE6SP3XPscreenshot.PNG
admin page: http://www.flickr.com/photos/juggernautco/10065981863/
shopin cart: http://www.flickr.com/photos/sswinehart/4415385405
wikipedia: http://upload.wikimedia.org/wikipedia/commons/8/87/WikipediaMainPage.png
games: http://www.flickr.com/photos/ian_d/30859899