angularjs szkolenie wewnętrzne (into)
TRANSCRIPT
![Page 1: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/1.jpg)
AngularJSpodobno tworzy go google ;)
![Page 2: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/2.jpg)
● o wiele szybsze pisanie aplikacji● bardzo łatwe pisanie aplikacji “czasu
rzeczywistego”● wprowadza szkielet aplikacji● MVC● Sky’s is the limit!
Dlaczego używamy AngularJS?
![Page 3: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/3.jpg)
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)
![Page 4: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/4.jpg)
Kiedyś...var name = '';
$('body').on('change', '#name-input', function() {
var name = $(this).val();
});
var set_name = function(new_name) {
$('#name-input').val(new_name);
}
![Page 5: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/5.jpg)
Data Binding (Two-way binding)
![Page 6: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/6.jpg)
Czyli...
$scope.name = 'Marcin Baran'; <input type="text" ng-model="name"
>
![Page 7: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/7.jpg)
Czyli...
$scope.name = ''; <input type="text" ng-model="name"
>
![Page 8: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/8.jpg)
Można to wykorzystać tak
![Page 9: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/9.jpg)
Marcin Mergo gdy dowiedział się że to co robił 2 godzin mógł zrobić w 2 minuty (true story bro!)
![Page 10: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/10.jpg)
$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
![Page 11: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/11.jpg)
$scope-ów może być naprawdę dużo
![Page 12: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/12.jpg)
$scope to nie tylko pudełko na zmienne$scope.name = 'Marcin';
$scope.$watch('myVar', function(newVal, oldVal) {
alert('Hej, ' + oldVal + ' zmienil imie na ' + newVal);
});
![Page 13: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/13.jpg)
Jak dziala $scope ?
![Page 14: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/14.jpg)
AngularJS Batarang
● super wtyczka do chrome● ułatwia naukę i debugowanie● pokazuje nam Performence aplikacji● i wiele wiecej
![Page 15: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/15.jpg)
AngularJS Batarang
![Page 16: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/16.jpg)
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
![Page 17: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/17.jpg)
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!
![Page 18: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/18.jpg)
AngularJS to
● Directives
● Filters
● Controllers
● App
● Models
● Services
![Page 19: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/19.jpg)
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
![Page 20: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/20.jpg)
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
![Page 21: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/21.jpg)
Wbudowane derektywy w angularJS
● ng-click
● ng-change
● ng-submit
● Więcej http://docs.angularjs.org/api/ng.$http
![Page 22: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/22.jpg)
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">
![Page 23: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/23.jpg)
Controllers
● idea taka jak zawsze● Kazdy controller ma wlasny scope● MainController => CalculatorCtrl, RateCtrl
![Page 24: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/24.jpg)
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
![Page 25: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/25.jpg)
App
● zawiera $rootScope● możliwość definiowania zmiennych
dostępnych w każdym $scopie● definuje się routing
![Page 26: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/26.jpg)
Pytania ?
![Page 27: AngularJS szkolenie wewnętrzne (into)](https://reader034.vdocuments.pub/reader034/viewer/2022052601/559666fc1a28abdd048b45e7/html5/thumbnails/27.jpg)
Dziękuje za uwagę!