Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie

Rozměr: px

Začít zobrazení ze stránky:

Download "Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 13.5.2015 Webové technologie"

Kristina Svobodová
před 8 lety
Počet zobrazení:

1 Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie RIA, JSON, REST, AngularJS

2 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

na klienta pozor: nelze přenést vše využití moderních API

3 strana 3 Ukázka sreality.cz zbozi.cz

4 strana 4 JSON JavaScript Object Notation { nazev: hodnota, cislo: 123, retezec: "text", pole: ["a", "b", 1, 2, ], objekt: { }, }

5 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

HTTP metody GET POST - vytvoření nové položky PUT -

6 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

7 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ý)

8 Angular JS - motivační příklad - kalkulačka strana 8

9 Angular JS - motivační příklad - kalkulačka strana 9

10 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

kódu není jediný příkaz typu "teď překresli výsledek"

11 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

12 strana 12 AngularJS Aplikace View Kontrolery Služby Direktivy Filtry

13 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() { }]);

14 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(); }]);

jí předány instance služeb apod. var app = angular.module('app', [ ]); app.

15 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

ng-model, ng-bind, ng-bind-html ng-if, ng-repeat ng-show, ng-hide

16 strana 16 Angular JS - View <!DOCTYPE html> <html ng-app="app"> <head> </head> <body> <div ng-controller="nazevctrl"> <p ng-repeat="person in people"> {{person.name}} </p> </div> </body> </html>

17 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

18 strana 18 Angular JS - Kontroler app.controller('employeesctrl', ['$scope', '$http', function($scope, $http) { $http.get("url").success(function(data) { $scope.people = data.people; }); }]);

19 strana 19 Angular JS - $scope a $rootscope kontejner propojující kontroler a view $rootscope je v aplikace jen jeden $rootscope.nadpis = " "; $scope.text = " "; $rootscope <body ng-app="app"> {{nadpis}} <header ng-controller="headerctrl"> {{nadpis}} {{text}} </header> {{text}}  </body> $scope z HeaderCtrl

text = " "; $rootscope <body ng-app="app"> {{nadpis}} <header

20 strana 20 Angular JS - zanoření kontrolerů <div ng-controller="firstctrl"> {{prom}} <div ng-controller="secondctrl"> {{prom}} <div ng-controller="thirdctrl"> {{prom}} </div> </div> </div>

21 strana 21 Angular JS - Služby singleton pro komunikaci mezi kontrolery pro uložení globálních dat zpřístupnění vlastních knihoven

22 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() { })

23 strana 23 Angular JS - Služby - vlastní app.factory("nazevsrvc",[" ", function( ) { return { vlastnost: [], metoda: function(p) { }, jinametoda: function(pp) { } }; }]);

24 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

25 strana 25 Angular JS - Direktivy app.directive("nazevdir", [" ", function( ) { return { two-way binding scope: { předání textu nazev: '=', jinynazev: '@', fce: '&' }, reference na funkci }; }]); link: function(scope, element, attrs) { element.addclass(" "); }, jqlite

26 strana 26 Angular JS - Direktivy - použití app.directive("nazevdir" scope: { nazev: '=', jinynazev: '@', fce: '&' } camelcase prefix data a - mezi slovy <div data-nazev-dir data-nazev="prom1" data-jiny-nazev="{{prom2}}" data-fce="fce1()"> </div>

27 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

28 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)

29 strana 29 Angular JS - Direktivy a $scope izolovaná scope = - obousměrná synchronizace - pro předání textu & - pro předání funkce scope: { var1: '=', var2: '@', fce: '&' }, link: function(scope) { scope.var1 = "abc"; }, <div data-direktiva data-var1="promenna" data-var2="jen text" data-fce="callme()"> </div>

30 strana 30 Angular JS - Direktivy a $scope někdy je potřeba hlídat změny proměnné scope.$watch('prom', function(newvalue) { });

31 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; }; }); <img ng-src="{{file.png imagesmall}}" />

32 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

33 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?

34 strana 34 Angular JS - View s routerem <!DOCTYPE html> <html ng-app="app"> <head> </head> <body> <div ng-view></div> </body> </html>

35 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); }]);

36 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

37 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", );

38 strana 38 Angular JS - časovač var delay = 1000; //v ms //jednou var timer = $timeout(function() { }, delay); //opakovane var timer = $interval(function() { }, delay);

39 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) { }); };

Podobné dokumenty

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 18.4.2017 Webové technologie RIA, SPA, AngularJS - šablony a controllery, služby $scope a $http strana 2 RIA - Rich Internet Application Chová se podobně jako desktopová