Angular js warsztaty stopień 2

  • 988 views
Uploaded on

AngularJs workshop 2

AngularJs workshop 2

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
988
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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/