Your SlideShare is downloading. ×
Angular js   warsztaty stopień 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Angular js warsztaty stopień 2

1,079
views

Published on

AngularJs workshop 2

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,079
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJsWarsztaty - stopień 2
  • 2. Środowisko● wi-fi: ASII-Guest● konsolowy git● chrome/chrominum<input type="range">
  • 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. Projekt
  • 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. Ścieżki● konfiguracja aplikacji● definicja ścieżek$routeProvider.when(/, {templateUrl: views/main.html,controller: MainCtrl}).when(/contact/:id, {redirectTo: /contact/:id/view})
  • 7. Kontrolery● $routeParams● contactsangular.module(workshop2App).controller(ContactViewCtrl,function ($scope, $routeParams, contacts) {$scope.contact = contacts.get($routeParams.id);$scope.id = $routeParams.id;});
  • 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. 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. Struktura plików● git checkout slide-1
  • 11. Yeoman
  • 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. 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. angular.forEach● pętla● nie kopiujej danych stworzonych przezangularavar array = [1, 2, 3];angular.forEach(array, function(value){this.push(Value: + value);});
  • 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. Rozwiązanie 1● git add .● git commit -m (commit message)● git checkout done-1● Pytania?
  • 17. Angular 1.1.x
  • 18. Animacje & ngAnimatehttp://www.nganimate.org/
  • 19. Zadanie 2: zastosowanie animacji● animowanię zmiany wyświeltanychelementów● git checkout todo-2● implementacja: app/views/showContacts.html & app/styles/main.css
  • 20. Rozwiązanie 2● git add .● git commit -m (commit message)● git checkout done-2● Pytania?
  • 21. Cel: liczenie userów
  • 22. Global controller● git checkout slide-3● pliki: app/index.html +26
  • 23. Generator UUID● git checkout slide-4● pliki: app/scripts/services/wsUuidGenerator.js
  • 24. Cookies
  • 25. Cookies w angularze● ngCookies● $cookies
  • 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. Rozwiązanie 3● git add .● git commit -m (commit message)● git checkout done-3● Pytania?
  • 28. Directives<span my-dir="exp"></span><span class="my-dir: exp;"></span><my-dir></my-dir><!-- directive: my-dir exp -->
  • 29. Pisanie directives● git checkout slide-5● plik: app/scripts/directives/ws-accept-cookies.js
  • 30. ngTransclude{transclude: true,template: <div ng-transclude></div>}
  • 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. Rozwiązanie 4● git add .● git commit -m (commit message)● git checkout done-4● Pytania?
  • 33. Linking function● scope● element● attrs
  • 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. Rozwiązanie 5● git add .● git commit -m (commit message)● git checkout done-5● Pytania?
  • 36. Instalowanie yeomana● Do przyszłych warsztatów będziemykorzytać z yeomana● Dla chetnych: sprubujcie teraz zainstalowaćhttp://yeoman.io/
  • 37. Co na następnych warsztatach?● directives● unit testy & TDD we frontendzie● warte uwagii projekty:○ angular-ui○ angular-bootstrap
  • 38. Stay tuned● Akai: http://akai.org.pl/● GDG Poznań: https://plus.google.com/110191013153077917985● Hacking Poznań: http://www.meetup.com/Hacking-Poznan/