angularjs szkolenie wewnętrzne (into)
TRANSCRIPT
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ę!