Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015
Webové technologie RIA, JSON, REST, AngularJS
strana 2
RIA - rich internet application
• chová se podobně jako desktopová aplikace – velké množství logiky přeneseno na klienta • pozor: nelze přenést vše
– využití moderních API nebo pluginů – přenosy dat na pozadí – možnost práce i offline
strana 3
Ukázka
• sreality.cz • zbozi.cz
strana 4
JSON
• JavaScript Object Notation { nazev: hodnota, cislo: 123, retezec: "text", pole: ["a", "b", 1, 2, …], objekt: {…}, … }
strana 5
REST - Representational State Transfer
• čtení, zápis, mazání a aktualizace dat • využívá přímo HTTP metody – GET – POST - vytvoření nové položky – PUT - obvykle aktualizace – DELETE
• bezstavový • používá XML nebo JSON
strana 6
AngularJS
• Frontendový framework – MVW • model-view-whatever
• Aplikace běží na straně klienta – Práce s modelem, šablony
• Komunikace s modelem pomocí AJAJ – ideálně REST
strana 7
AngularJS - proč?
• nový přístup k tvorbě webových aplikací • navržen pro dynamické změny HTML struktury • šetří spoustu práce programátorovi • je vhodný pro aplikace – na statické prezentace je zbytečný (nevhodný)
strana 8
Angular JS - motivační příklad kalkulačka
strana 9
Angular JS - motivační příklad kalkulačka
strana 10
Angular JS - motivační příklad kalkulačka • věnujte pozornost tomu, jak je to napsané • v celém kódu není jediný příkaz typu "teď překresli výsledek" – vše se hlídá automaticky • pokud dodržujeme určitá pravidla
strana 11
AngularJS - nevýhody
• větší zátěž klienta – staré počítače mají problémy
• staré prohlížeče mají problémy – nepodporují nové API (např. history)
• vyhledávače většinou neumí indexovat dynamický obsah – Google ano – site:informatika.mendelu.cz
strana 12
AngularJS
• Aplikace – View – Kontrolery – Služby – Direktivy – Filtry
strana 13
Angular JS - Aplikace
• aplikace je kontejner, do kterého registrujeme jmenované komponenty – může být složena z modulů var app = angular.module('app', ['modul1', 'modul2']); app.config([function() {…}]); app.run([function() {…}]);
strana 14
Angular JS - dependency injection
• každá komponenta aplikace deklaruje své závislosti, když je vytvářena její konkrétní instance, budou jí předány instance služeb apod. var app = angular.module('app', […]); app.controller('NazevCtrl', ['zavislost', function(zavislost) { zavislost.metoda(); }]);
strana 15
Angular JS - View
• HTML šablona – řídí, který kontroler se spustí – obohacená o speciální atributy ng-* • • • • • •
ng-app ng-controller, ng-model, ng-bind, ng-bind-html… ng-if, ng-repeat… ng-show, ng-hide… ng-class, ng-style, ng-href, ng-src… ng-click, ng-change, ng-submit…
strana 16
Angular JS - View …
strana 17
Angular JS - Kontroler
• JS funkce – načte obvykle data z REST API a zajistí jejich předání šabloně
• pomocí dependency injection získá reference na potřebné služby – $scope – $http – $routeParams –…
strana 18
Angular JS - Kontroler app.controller('EmployeesCtrl', ['$scope', '$http', function($scope, $http) { $http.get("url") .success(function(data) { $scope.people = data.people; }); }]);
strana 19
Angular JS - $scope a $rootScope
• kontejner propojující kontroler a view • $rootScope je v aplikace jen jeden $rootScope.nadpis = "…"; $scope.text = "…";
$rootScope
{{nadpis}}
{{text}}
$scope z HeaderCtrl
strana 20
Angular JS - zanoření kontrolerů
strana 21
Angular JS - Služby
• singleton – pro komunikaci mezi kontrolery – pro uložení globálních dat – zpřístupnění vlastních knihoven –…
strana 22
Angular JS - služba $http
• komunikace pomocí JSON (obousměrně) – formát odesílaných dat lze přepnout: app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; }]);
• $http.get(), $http.post(), … – $http.get(…).success(function() {…}).error(function() {…})
strana 23
Angular JS - Služby - vlastní app.factory("nazevSrvc",["…", function(…) { return { vlastnost: [], metoda: function(p) { }, jinaMetoda: function(pp) { } }; }]);
strana 24
Angular JS - Direktivy
• stará se o modifikaci DOM • využijeme, pokud chceme naprogramovat znovupoužitelnou funkcionalitu • framework má mnoho direktiv (HTML atributy ng-*) – vlastní direktivy nepojmenováváme ng-* – asi nejsložitější část frameworku
strana 25
Angular JS - Direktivy app.directive("nazevDir", ["…", function(…) { two-way binding return { scope: { předání textu nazev: '=', jinyNazev: '@', fce: '&' reference na funkci }, link: function(scope, element, attrs) { element.addClass("…"); }, jqLite }; }]);
strana 26
Angular JS - Direktivy - použití app.directive("nazevDir"… scope: { camelCase nazev: '=', jinyNazev: '@', fce: '&' } prefix data a - mezi slovy
strana 27
Angular JS - Direktivy
• můžou mít vlastní kontroler • můžou mít vlastní šablonu (soubor) • problém s kombinovanými direktivami – je nutné napsat direktivu pro obal a pro následníky – nastaví se nadřazená direktiva
strana 28
Angular JS - Direktivy a $scope
• transclude - propojení $scope direktivy a nadřazeného controlleru • scope: {} – izolovaná
• scope: true – vytvoří vlastní, která dědí z nadřazené
• scope: false – použije nadřazenou (kontroller nebo root)
strana 29
Angular JS - Direktivy a $scope
• izolovaná scope – = - obousměrná synchronizace proměnné – @ - pro předání textu – & - pro předání funkce scope: { var1: '=', var2: '@', fce: '&' }, link: function(scope) { scope.var1 = "abc"; },
strana 30
Angular JS - Direktivy a $scope
• někdy je potřeba hlídat změny proměnné
scope.$watch('prom', function(newValue) { … });
strana 31
Angular JS - Filtry
• pro úpravu výstupu – {{'nazev_hlasky'|translate}} – {{cislo|zaokrouhli}} app.filter('imageSmall', function() { return function(file) { return "small.php?&file="+file; }; });
![]()
strana 32
Angular JS - Routing
• dokáže pro různé URL vybrat odpovídající view a tím i kontroler(y) app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider.when("/", { templateUrl: "cesta/k/sablone.html", controller: "NazevCtrl" }); $routeProvider.otherwise({redirectTo: "/"}); $locationProvider.html5Mode(true); použije history API }]); pro změnu URL
strana 33
Angular JS - Routing - parametry
• do route je možné zadat i parametry, které předáme kontroleru pomocí $routeParams • např. URL: – /clanky/123
• routa: – /clanky/:idClanku – /clanky/:idClanku?
strana 34
Angular JS - View s routerem …
strana 35
Angular JS - Routing app.config(['$routeProvider', function($routeProvider) { $routeProvider.when("/route/:param", { templateUrl: "cesta/k/sablone.html", controller:, "paramCtrl" }); $routeProvider.otherwise({redirectTo: "/"}); }]); app.controller("paramCtrl", ["$routeParams", function($routeParams) { console.log($routeParams.param); }]);
strana 36
Angular JS a knihovny
• Obsahuje jQuery Lite – použije se, pokud není dostupné jQuery – hlavní využití v direktivách – nepodporuje CSS selektory • moderní prohlížeče přes querySelector
• Příliš se nesnese s Bootsrapem, jQuery UI apod. – dynamické změny HTML kódu nejsou tyto knihovny schopné zpracovat
strana 37
Angular JS - události
• zachycení: – $scope.$on("nazev", function(e, …) {})
• vyslání směrem nahoru • $scope.emit("nazev", …);
• vyslání směrem dolů – $scope.broadcast("nazev", …);
strana 38
Angular JS - časovač var delay = 1000; //v ms //jednou var timer = $timeout(function() { … }, delay); //opakovane var timer = $interval(function() { … }, delay);
strana 39
Angular JS - aktualizace dat po události vyvolané mimo ng-* domNode je napr. prvek mimo ng-app nebo mapa apod.
domNode.onclick = function(event) { scope.$apply(function(newValue) { … }); };
