Angular js warsztaty stopień 1

1,352 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,352
On SlideShare
0
From Embeds
0
Number of Embeds
737
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular js warsztaty stopień 1

  1. 1. AngularJsWarsztaty - stopień 1
  2. 2. AngularJs "Hello world"● git checkout slide-1
  3. 3. ng-include● git checkout slide-2
  4. 4. Kontroler
  5. 5. $scope
  6. 6. ng-controller● git checkout slide-3● podpięcie kontrolera do częsci widoku● $scope działa tylko wewnątrz tagu na którymjest kontroler
  7. 7. Zadanie 1● git checkout todo-1● dodanie kontrolera zawierajacego menu● dodanie i wyświetlenie menu w index.html
  8. 8. Rozwiązanie 1● git add .● git commit -m (commit message)● git checkout done-1
  9. 9. $routeProvider● git checkout slide-4
  10. 10. ng-repeat<ul><li ng-repeat="project in projects"><a href=""></a>:</li></ul>
  11. 11. Zadanie 2● git checkout todo-2● zbudować menu zawierające linki dowszystkich ścieżekvar object = {};var array = [];var arrayOfObjects = [{lorem: 1,ipsum: 2},{test: 4} ]
  12. 12. Rozwiązanie 2● git add .● git commit -m (commit message)● git checkout done-2
  13. 13. Zadanie 3● git checkout todo-3● zbudować własną podstronę, zwyświetlaniem listy danych podanych wkontrolerze
  14. 14. Rozwiązanie 3● git add .● git commit -m (commit message)● git checkout done-3
  15. 15. OrderBy● git checkout slide-5<ul><li ng-repeat="product in products | orderBy:price"></ul>
  16. 16. Zadanie 4● git checkout todo-4● wymień hardkodowany parametr napochodzący ze zmiennej ustawianej wformularzu
  17. 17. Rozwiązanie 4● git add .● git commit -m (commit message)● git checkout done-4
  18. 18. filter● git checkout slide-6● składnia filter: {experesion}<tr ng-repeat="person in list | orderBy:orderKey |filter:oo">
  19. 19. filter - argumenty● Lorem ipsum● {key: value}● {$: value}
  20. 20. Zadanie 5● git checkout todo-5● zmienić filter na wyszukiwarkę z 3 polami:szukanie po firstName, lastName lubwszędzie
  21. 21. Rozwiązanie 5● git add .● git commit -m (commit message)● git checkout done-5
  22. 22. Funkcje w modelu<p>{{displayValueReturnedByFunction()}}</p><input ng-change="fireFunctionWhenChangeHappen()">
  23. 23. Validowanie formularza● git checkout slide-8
  24. 24. Zadanie 6● git checkout todo-6● newPerson form● ng-click○ nazwaListy.push(nowyElement)○ podstawić {}
  25. 25. Rozwiązanie 6● git add .● git commit -m (commit message)● git checkout done-6
  26. 26. Trzymanie danych w controlerze● git checkout slide-9● #/main
  27. 27. Services● git checkout slide-10● #/main
  28. 28. Zadanie 7● git checkout todo-7● dodanie własnego serwisu, People doużytku przez ListCtrl
  29. 29. Rozwiązanie 7● git add .● git commit -m (commit message)● git checkout done-7
  30. 30. Json - obiekt{"about": "Im an object","structure": {"key": "value"},"arrays": [ "I", "can", "keep","them", "too" ]}
  31. 31. Json - tablica[{"objectId": 1},{"objectId": 2}]
  32. 32. Rest● http://example.com/products● http://example.com/products/1
  33. 33. $resource● query()● get()var userResource = $resource(/user/:userId, {});userResource.get({userId: 1});
  34. 34. Dane do json● git checkout slide-11
  35. 35. Podsumowanie
  36. 36. Materiały● http://docs.angularjs.org/tutorial/● http://egghead.io/
  37. 37. Co dalej?● webstorage etc.● backend● dev env● unit tests
  38. 38. Stay tuned● http://akai.org.pl/● http://poznan.gtug.pl/● http://www.meetup.com/Hacking-Poznan/

×