Angular js - 4developers 12 kwietnia 2013

1,932 views

Published on

WIdeo i notatki do prezentacji:
http://marcin-wosinek.github.io/blog/prezentacja/2013/04/12/AngularJs-4developers-Warszawa.html

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,932
On SlideShare
0
From Embeds
0
Number of Embeds
1,096
Actions
Shares
0
Downloads
12
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Angular js - 4developers 12 kwietnia 2013

  1. 1. AngularJs4Developers 12 kwietnia 2013
  2. 2. AngularJs4Developers 12 kwietnia 2013
  3. 3. Kim jestem?● Marcin Wosinek● 5 lat doświadczenia w IT - WebDev: Javascript - C# dev: UnitTests● Aktualnie js kontraktor w Poznaniu
  4. 4. Wy?
  5. 5. Temat
  6. 6. Nowa rzeczywistość
  7. 7. Tradycyjna architektura stron Serwer html z request danymi KLIENT
  8. 8. Podejście aplikacyjne Serwer js dane rest template KLIENT
  9. 9. Komunikacja z backendem{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }}
  10. 10. Zmiany
  11. 11. Wyzwania - testowalnośćfunction PasswordCtrl() { var msg = $(.ex1 span); var input = $(.ex1 input); var strength; this.grade = function() { msg.removeClass(strength); var pwd = input.val(); password.text(pwd); if (pwd.length > 8) { strength = strong; } else { strength = weak; } msg .addClass(strength) .text(strength);
  12. 12. Wyzwania - boilerplateinitialize: function () { this.allCheckbox = this.$(#toggle-all)[0]; this.$input = this.$(#new-todo); this.$footer = this.$(#footer); this.$main = this.$(#main); this.listenTo(app.Todos ,add,this.addOne); this.listenTo(app.Todos, reset, this.addAll); this.listenTo(app.Todos, change:completed, this.filterOne); this.listenTo(app.Todos, filter, this.filterAll); this.listenTo(app.Todos, all, this.render); app.Todos.fetch();}
  13. 13. AngularJs
  14. 14. $scopeArchitektura MV* Kontroler ViewModel Generowane przezAngularowy html serwisy View Model AngularJs core
  15. 15. Widok<ul> <li ng-repeat="todo in todos"> <span></span> </li></ul><form ng-submit="addTodo()"> <input ng-model="todoText" /> <input type="submit" value="add" /></form>
  16. 16. Filtry<ul> <li ng-repeat="project in projects |filter:search | orderBy:name"> <a href=""></a>: </li></ul>
  17. 17. Kontrolery
  18. 18. $scopeprezentacja
  19. 19. Proste obiekty js// Backboneapp.Todo = Backbone.Model.extend({ defaults: { title: , completed: false }});// EmberTodos.Todo = DS.Model.extend({ title: DS.attr(string), isCompleted: DS.attr(boolean) });// Angulartodos.push({ title: $scope.newTodo, completed: false });
  20. 20. Two ways binding
  21. 21. Wsparcie dla formularzaprezentacja<!-- Html updated by angular --><form name="exampleForm" class="ng-pristine ng-invalid ng-invalid-required"> Required field: <input ng-model="required" required="" class="ng-pristine ng-invalid ng-invalid-required"></label> <br> Email field: <input ng-model="email" type="email" class="ng-pristine ng-valid ng-valid-email"></label> <br> <button ng-disabled="!exampleForm.$valid" disabled="disabled">Submit</button></form>
  22. 22. Wstrzykiwanie zależnościfunction HelloCtrl($scope, $window, $log) { $scope.message = Display me in view; $window.alert(Use window via $window service - thatimproves testability); $log.log(We can even test console log calls - thats to$log wrapper);}
  23. 23. Serwisy// Services that persists and retrieves ToDos from// localStoragetodomvc.factory(todoStorage, function () { var STORAGE_ID = todos-angularjs; return { get: function () { return JSON .parse(localStorage.getItem(STORAGE_ID) || []); }, put: function (todos) { localStorage .setItem(STORAGE_ID, JSON.stringify(todos)); }};});
  24. 24. Ścieżki - $routeProviderangular.module(phonecat, []) .config([$routeProvider, function($routeProvider, $locationProvider) { // $locationProvider.html5Mode(true); $routeProvider .when(/phones, { templateUrl: partials/phone-list.html, controller: PhoneListCtrl }) .when(/phones/:phoneId, { templateUrl: partials/phone-detail.html, controller: PhoneDetailCtrl }) .otherwise({ redirectTo: /phones });}]);
  25. 25. Komunikacja z backendem - $resourcemyApp.factory(ProductService, function($resource) { var ProductResource = $resource(/product/:productId) , ProductService = {}; ProductService.getItem = function (index) { return ProductResource.get({productId: index});} ProductService.addItem = function (item) { ProductResource.save({}, item));} return ProductService;});function ProductCtrl($scope, ProductService) { // Take products form ProductService and put it on$scope}
  26. 26. Directives<ANY class="ng-show: {expression};"><ANY ng-show="{expression}"><ANY class="ng-hide: {expression};"><ANY ng-hide="{expression}"><ng-view> <any ng-view><ANY ng-class="{expression}"> <ANY class="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>
  27. 27. Yeoman
  28. 28. Karma (Testacular)
  29. 29. NawykiPisanie callbacków
  30. 30. Nawykibindowanie
  31. 31. NawykiZmienianie DOM wkontrolerze
  32. 32. Gotchas - pisanie directivesangular.module(blink, []) .directive(blink, function() { return { restrict: E, link: function(scope, elm, attr) { setInterval(function() { elm.toggle(); }, parseInt(attr.interval, 10) || 1000); } }; });
  33. 33. Gotchas - ng-model w ng-repeat// Gotcha!<ul> <li ng-repeat="item in list"> <input ng-model="item" /> </li></ul>// Work as expected<ul> <li ng-repeat="item in list"> <input ng-model="item.name" /> </li></ul>
  34. 34. Gotchas - minimalizowanie kodusyngularApp.controller(ProductCtrl, function($scope,ProductApi) { // easy but minification unfriendly});syngularApp.controller(ProductCtrl, [$scope,ProductApi, function($scope, ProductApi) { // minification resistant}]);
  35. 35. Gotchas - $resource
  36. 36. Gotchas - filtry działające tylko na tablicach filter orderBy
  37. 37. Gotchas -e2e?
  38. 38. Gotchas - aktualizowanie scopespoza frameworka $digest $apply
  39. 39. Gotchas - $ w nazwach serwisów $
  40. 40. Pytania ?
  41. 41. Materiały● http://angularjs.org/● http://egghead.io/● http://www.youtube.com/user/angularjs
  42. 42. Podsumowanie
  43. 43. Kontakt● marcin.wosinek@gmail.com● @MarcinWosinek● linki + notatki:http://bit.ly/4Devs-AngularJs
  44. 44. Podziękowania● zdjęcie z publicznością: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream● logo BackboneJs: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.● Two ways binding: http://docs.angularjs.org/guide/dev_guide.templates.databinding● http://karma-runner.github.io/0.8/index.html● http://yeoman.io/

×