AngularJs workshop 2

1. AngularJs
Warsztaty - 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
● contacts
angular.module('workshop2App')
.controller('ContactViewCtrl',
function ($scope, $routeParams, contacts) {
$scope.contact = contacts.get($routeParams.id);
$scope.id = $routeParams.id;
});

8. Serwis z danymi
● contacts
● json-generator
angular.module('workshop2App')
.factory('contacts', function () {
var exampleContacts = [ ... ];
// Public API here
return {
getAll: function () {
return exampleContacts;
},
get: function (id) {}

9. Underscore
● użyteczne funkcje
● dokumentacja
var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return
num % 2 == 0; });
// => [2, 4, 6]
var sum = _.reduce([1, 2, 3], function(memo, num){ return
memo + 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ów
angular.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 przez
angulara
var array = [1, 2, 3];
angular.forEach(array, function(value){
this.push('Value: ' + value);
});

15. Zadanie 1: filtr przedziału
● filtr wybierający ludzi z odpowiedniego
przedział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 & ngAnimate
http://www.nganimate.org/

19. Zadanie 2: zastosowanie animacji
● animowanię zmiany wyświeltanych
elementó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 chcemy
mieć wciąż w directive + chcemy mieć guzik
'accept'

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ędziemy
korzytać 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/