Angular js warsztaty stopień 2

1,395 views

Published on

AngularJs workshop 2

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

  • Be the first to like this

No Downloads
Views
Total views
1,395
On SlideShare
0
From Embeds
0
Number of Embeds
543
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular js warsztaty stopień 2

  1. 1. AngularJsWarsztaty - stopień 2
  2. 2. Środowisko● wi-fi: ASII-Guest● konsolowy git● chrome/chrominum<input type="range">
  3. 3. Start● Treść slajdów: http://bit.ly/angular-workshop2● git clone https://github.com/marcin-wosinek/workshop-2.git● chrome:○ linux: chromium-browser --disable-web-security○ windows - skopiować link do chroma i edytować:"(originalny link) --disable-web-security"● git config --global alias.tree "log --oneline --graph --decorate --all"
  4. 4. Projekt
  5. 5. index.html● ng-view - ładujemy ścieżki● underscore - użyteczne funkcje<!-- Add your site or application content here --><div class="container" ng-view></div><script src="components/angular/angular.js"></script><script src="components/underscore/underscore.js"></script>
  6. 6. Ścieżki● konfiguracja aplikacji● definicja ścieżek$routeProvider.when(/, {templateUrl: views/main.html,controller: MainCtrl}).when(/contact/:id, {redirectTo: /contact/:id/view})
  7. 7. Kontrolery● $routeParams● contactsangular.module(workshop2App).controller(ContactViewCtrl,function ($scope, $routeParams, contacts) {$scope.contact = contacts.get($routeParams.id);$scope.id = $routeParams.id;});
  8. 8. Serwis z danymi● contacts● json-generatorangular.module(workshop2App).factory(contacts, function () {var exampleContacts = [ ... ];// Public API herereturn {getAll: function () {return exampleContacts;},get: function (id) {}
  9. 9. Underscore● użyteczne funkcje● dokumentacjavar evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ returnnum % 2 == 0; });// => [2, 4, 6]var sum = _.reduce([1, 2, 3], function(memo, num){ returnmemo + num; }, 0);// => 6_.isString(object)_.isNumber(object)
  10. 10. Struktura plików● git checkout slide-1
  11. 11. Yeoman
  12. 12. Filtry● pozwalają zmieniać dane z poziomu widoku● wbudowane filtry<p></p><p>Output: </p><tr ng-repeat="friend in friends | filter:searchText"></tr>
  13. 13. Pisanie filtrów● zwracamy przetworzony element● przyjmujemy dowolną liczę argumentówangular.module(workshop2App).filter(filterName, function () {return function (input, arg1, arg2) {return between filter: + input;};});<li ng-repeat="element in list | filterName:value1:value2">
  14. 14. angular.forEach● pętla● nie kopiujej danych stworzonych przezangularavar array = [1, 2, 3];angular.forEach(array, function(value){this.push(Value: + value);});
  15. 15. Zadanie 1: filtr przedziału● filtr wybierający ludzi z odpowiedniegoprzedziału wieku● git checkout todo-1● użycie: app/views/showContacts.html +9● implementacja: app/scripts/filters/between.js
  16. 16. Rozwiązanie 1● git add .● git commit -m (commit message)● git checkout done-1● Pytania?
  17. 17. Angular 1.1.x
  18. 18. Animacje & ngAnimatehttp://www.nganimate.org/
  19. 19. Zadanie 2: zastosowanie animacji● animowanię zmiany wyświeltanychelementów● git checkout todo-2● implementacja: app/views/showContacts.html & app/styles/main.css
  20. 20. Rozwiązanie 2● git add .● git commit -m (commit message)● git checkout done-2● Pytania?
  21. 21. Cel: liczenie userów
  22. 22. Global controller● git checkout slide-3● pliki: app/index.html +26
  23. 23. Generator UUID● git checkout slide-4● pliki: app/scripts/services/wsUuidGenerator.js
  24. 24. Cookies
  25. 25. Cookies w angularze● ngCookies● $cookies
  26. 26. Zadanie 3: tracking cookies● git checkout todo-3● implementacja:app/scripts/controllers/global.js● Jeśli nie ma trackingId na ciasteczku -ustawamy je na nowo wygenerowany UUID
  27. 27. Rozwiązanie 3● git add .● git commit -m (commit message)● git checkout done-3● Pytania?
  28. 28. Directives<span my-dir="exp"></span><span class="my-dir: exp;"></span><my-dir></my-dir><!-- directive: my-dir exp -->
  29. 29. Pisanie directives● git checkout slide-5● plik: app/scripts/directives/ws-accept-cookies.js
  30. 30. ngTransclude{transclude: true,template: <div ng-transclude></div>}
  31. 31. Zadanie 4: template dla ws-accept-cookies● git checkout todo-4● przykład użycia: app/index.htm +27● implementacja: app/scripts/directives/ws-accept-cookies.js● to co jest oryginalnie wewnatrz tagu chcemymieć wciąż w directive + chcemy mieć guzikaccept
  32. 32. Rozwiązanie 4● git add .● git commit -m (commit message)● git checkout done-4● Pytania?
  33. 33. Linking function● scope● element● attrs
  34. 34. Zadanie 5: ws-accept-cookies -implementacja chowania● git checkout todo-5● dodanie obsługki kliknięcia guzika akceptuj● ukrywanie elementu jesli ciasteczka były jużzaakceptowane
  35. 35. Rozwiązanie 5● git add .● git commit -m (commit message)● git checkout done-5● Pytania?
  36. 36. Instalowanie yeomana● Do przyszłych warsztatów będziemykorzytać z yeomana● Dla chetnych: sprubujcie teraz zainstalowaćhttp://yeoman.io/
  37. 37. Co na następnych warsztatach?● directives● unit testy & TDD we frontendzie● warte uwagii projekty:○ angular-ui○ angular-bootstrap
  38. 38. Stay tuned● Akai: http://akai.org.pl/● GDG Poznań: https://plus.google.com/110191013153077917985● Hacking Poznań: http://www.meetup.com/Hacking-Poznan/

×