The angular way 19 october 2013 Gdańsk

777 views

Published on

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

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
777
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The angular way 19 october 2013 Gdańsk

  1. 1. The angular way Meet js summit Gdańsk 19 October 2013
  2. 2. Who am I? ● Marcin Wosinek ● 5 years IT experience - WebDev: Javascript - C# dev: UnitTests ● Currently js contractor in Roche in Poznan
  3. 3. You?
  4. 4. The buzz
  5. 5. Reality
  6. 6. Common pitfall
  7. 7. Angular strong points ● single page apps ● forms ● REST
  8. 8. Note
  9. 9. Angular’s domain
  10. 10. Angular’s domain NOT
  11. 11. Angular MV* Model Services Controller Directives View
  12. 12. Concerns separation Model Business logic Services Infrast. logic Controller View logic Directives DOM manip. View Declarative binding
  13. 13. 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>
  14. 14. Module A Modules - idea ● ● ● ● directives services controllers filters file-a.js Module B START ● ● ● ● directives services controllers filters file-b.js
  15. 15. Modules - splitting code angular ui angular core other lib app core user page admin page
  16. 16. 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>
  17. 17. Keeping code testable ● ● ● ● DOM services $window TDD FTW
  18. 18. Karma
  19. 19. Test frameworks
  20. 20. Yeoman
  21. 21. Grunt
  22. 22. Yo generators
  23. 23. 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
  24. 24. AngularJs community ● fb.com/groups/angularjs.polska ● ng-camp?
  25. 25. Summary
  26. 26. Questions ?
  27. 27. Contact ● marcin.wosinek@gmail.com ● @MarcinWosinek ● links, slides, notes and (hopefully) video: http://bit.ly/ng-summit
  28. 28. 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

×