AngularJSpodobno tworzy go google ;)

● o wiele szybsze pisanie aplikacji● bardzo łatwe pisanie aplikacji “czasu

rzeczywistego”● wprowadza szkielet aplikacji● MVC● Sky’s is the limit!

Dlaczego używamy AngularJS?

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)

Kiedyś...var name = '';

$('body').on('change', '#name-input', function() {

var name = $(this).val();

});

var set_name = function(new_name) {

$('#name-input').val(new_name);

}

Data Binding (Two-way binding)

Czyli...

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

>

Czyli...

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

>

Można to wykorzystać tak

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

$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

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

$scope to nie tylko pudełko na zmienne$scope.name = 'Marcin';

$scope.$watch('myVar', function(newVal, oldVal) {

alert('Hej, ' + oldVal + ' zmienil imie na ' + newVal);

});

Jak dziala $scope ?

AngularJS Batarang

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

AngularJS Batarang

Ciekawostka:

Gdy jest jakiś błąd w panelu klienta, jesteśmy w stanie odświeżyć stronę WSZYSTKIM użytkownikom

AngularJS + socket.io aka ServerPush

ping_notifier('refresh_page')# na produkcji

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!

AngularJS to

● Directives

● Filters

● Controllers

● App

● Models

● Services

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

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

Wbudowane derektywy w angularJS

● ng-click

● ng-change

● ng-submit

● Więcej http://docs.angularjs.org/api/ng.$http

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="ng-

scope">

Controllers

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

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

App

● zawiera $rootScope● możliwość definiowania zmiennych

dostępnych w każdym $scopie● definuje się routing

Pytania ?

Dziękuje za uwagę!