0
AngularJs4Developers 12 kwietnia 2013
AngularJs4Developers 12 kwietnia 2013
Kim jestem?● Marcin Wosinek● 5 lat doświadczenia w IT     - WebDev: Javascript     - C# dev: UnitTests● Aktualnie js kontr...
Wy?
Temat
Nowa rzeczywistość
Tradycyjna architektura stron                 Serwer        html z                          request        danymi         ...
Podejście aplikacyjne                  Serwer          js                    dane   rest       template                  K...
Komunikacja z backendem{    "firstName": "John",    "lastName": "Smith",    "age": 25,    "address": {      "streetAddress...
Zmiany
Wyzwania - testowalnośćfunction PasswordCtrl() {  var msg = $(.ex1 span);  var input = $(.ex1 input);  var strength;  this...
Wyzwania - boilerplateinitialize: function () {    this.allCheckbox = this.$(#toggle-all)[0];    this.$input = this.$(#new...
AngularJs
$scopeArchitektura MV*                                 Kontroler                     ViewModel                     Generow...
Widok<ul>  <li ng-repeat="todo in todos">     <span></span>  </li></ul><form ng-submit="addTodo()">  <input ng-model="todo...
Filtry<ul>  <li ng-repeat="project in projects |filter:search | orderBy:name">      <a href=""></a>:  </li></ul>
Kontrolery
$scopeprezentacja
Proste obiekty js// Backboneapp.Todo = Backbone.Model.extend({    defaults: {        title: ,        completed: false }});...
Two ways binding
Wsparcie dla formularzaprezentacja<!-- Html updated by angular --><form name="exampleForm" class="ng-pristine ng-invalid  ...
Wstrzykiwanie zależnościfunction HelloCtrl($scope, $window, $log) {  $scope.message = Display me in view;  $window.alert(U...
Serwisy// Services that persists and retrieves ToDos from// localStoragetodomvc.factory(todoStorage, function () {  var ST...
Ścieżki - $routeProviderangular.module(phonecat, [])  .config([$routeProvider,      function($routeProvider, $locationProv...
Komunikacja z backendem - $resourcemyApp.factory(ProductService, function($resource) {  var ProductResource = $resource(/p...
Directives<ANY   class="ng-show: {expression};"><ANY   ng-show="{expression}"><ANY   class="ng-hide: {expression};"><ANY  ...
Yeoman
Karma (Testacular)
NawykiPisanie callbacków
Nawykibindowanie
NawykiZmienianie DOM wkontrolerze
Gotchas - pisanie directivesangular.module(blink, [])  .directive(blink, function() {    return {       restrict: E,      ...
Gotchas - ng-model w ng-repeat// Gotcha!<ul>  <li ng-repeat="item in list">     <input ng-model="item" />  </li></ul>// Wo...
Gotchas - minimalizowanie kodusyngularApp.controller(ProductCtrl, function($scope,ProductApi) {  // easy but minification ...
Gotchas -       $resource
Gotchas - filtry działające tylko na tablicach               filter             orderBy
Gotchas -e2e?
Gotchas - aktualizowanie scopespoza frameworka      $digest      $apply
Gotchas - $ w nazwach serwisów            $
Pytania          ?
Materiały● http://angularjs.org/● http://egghead.io/● http://www.youtube.com/user/angularjs
Podsumowanie
Kontakt● marcin.wosinek@gmail.com● @MarcinWosinek● linki + notatki:http://bit.ly/4Devs-AngularJs
Podziękowania●   zdjęcie z publicznością: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream●   logo Backb...
Upcoming SlideShare
Loading in...5
×

Angular js - 4developers 12 kwietnia 2013

1,447

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
  • Notatki:
    http://marcin-wosinek.github.io/blog/prezentacja/2013/04/12/AngularJs-4developers-Warszawa.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,447
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×