1. AngularJS
podobno tworzy go google ;)

2. Dlaczego używamy AngularJS?
● o wiele szybsze pisanie aplikacji
● bardzo łatwe pisanie aplikacji “czasu
rzeczywistego”
● wprowadza szkielet aplikacji
● MVC
● Sky’s is the limit!

3. Jakie są wady pisania w nim ?
● wystarczy jeden błąd i panel klienta nie
działa
● tydzień hakowałem by działał po IE7 i IE8
● działa wolno pod starszymi przeglądarkami
● niektóre rzeczy są naprawdę trudne!
● Jeśli korzystamy z szablony Django to
trzeba pamiętać o VERBATIM :-)
● Nie lubi się z JQ (chociaż z niego korzysta)

4. Kiedyś...
var name = '';
$('body').on('change', '#name-input', function() {
var name = $(this).val();
});
var set_name = function(new_name) {
$('#name-input').val(new_name);
}

5. Data Binding (Two-way binding)

6. Czyli...
$scope.name = 'Marcin Baran';
<input type= "text" ng-model= "name"
>

7. Czyli...
$scope.name = '';
<input type= "text" ng-model= "name"
>

8. Można to wykorzystać tak

9. Marcin Mergo gdy dowiedział się że to co
robił 2 godzin mógł zrobić w 2 minuty (true
story bro!)

10. $scope - context
● $scope są zagnieżdżane
● każdy $scope może odwołać się do swojego
rodzica
● $scope może odczytać wartości swoich
rodziców
● $scope nie może odczytać wartości swoich
dzieci

11. $scope-ów może być naprawdę dużo

12. $scope to nie tylko pudełko na
zmienne
$scope.name = 'Marcin';
$scope.$watch('myVar', function(newVal, oldVal) {
alert('Hej, ' + oldVal + ' zmienil imie na ' + newVal);
});

13. Jak dziala $scope ?

14. AngularJS Batarang
●
●
●
●
super wtyczka do chrome
ułatwia naukę i debugowanie
pokazuje nam Performence aplikacji
i wiele wiecej

15. AngularJS Batarang

16. Ciekawostka:
Gdy jest jakiś błąd w panelu klienta, jesteśmy w
stanie odświeżyć stronę WSZYSTKIM
użytkownikom
ping_notifier('refresh_page')# na produkcji
AngularJS + socket.io aka ServerPush

17. Aplikacja “czasu rzeczywistego”
● serverpush - czyli socket.io + serwer
tornadio
● ping_notifier(event, some data) powiadomienie o zmianie z poziomu pythona
● $scope.$on(event, some data) - odbieranie
danych po stronie JavaScript
● zmiana danych bez przeładowania!

18. AngularJS to
● Directives
● Filters
● Controllers
● App
● Models
● Services

19. Directives - reużycie (HTML)
● Jak templatetags w django!
● Derektywa <tooltip>Jakieś info</tooltip>
tworzy nam odpowiedni HTML + dodaje
odpowiedni JS
● <input ik-calendar> - Tworzy nam kalendarz
● <chart /> - tworzy nam wykres kursów

20. Wbudowane derektywy w angularJS
● ng-show/ng-hide
● ng-repeat/ng-repeat-start/ng-repeat-end
● ng-init
● ng-class
● Więcej http://docs.angularjs.org/api/ng.$http

21. Wbudowane derektywy w angularJS
● ng-click
● ng-change
● ng-submit
● Więcej http://docs.angularjs.org/api/ng.$http

22. Filters
● Jak filters w django!
● modyfikują wartość
● filtr filtrujący listę kont użytkownika (w htmlu)
<div ng-repeat= "account in accounts|filter: {is_owner: true}" class="ngscope">

23. Controllers
● idea taka jak zawsze
● Kazdy controller ma wlasny scope
● MainController => CalculatorCtrl, RateCtrl

24. Services (lazy objects)
● Współdzielenie danych między controller
● Do czego można je użyć ?
○ $transactions - lista transakcji użytkownika
○ $balance - agegator sald na kontach w (ED)
○ $myhttp - własny AJAX handler

25. App
● zawiera $rootScope
● możliwość definiowania zmiennych
dostępnych w każdym $scopie
● definuje się routing

26. Pytania ?

27. Dziękuje za uwagę!