1 Mateusz Uherek

2 Agenda AngularJS REST-owe API w aplikacji SeamKomunikacja AngularJS z serwerem RESTEasy (wbudowanym w serwer JBoss) Przykłady aplikacji wykorzystujących omówione technologie

3 ZACZYNAMY…

4 BUUUM! AngularJS JavaScript SPA MVC Directive Scope FilterData-Binding Directive View jqLite Scope Service Local Storage Factory Filter BUUUM! Module Dependency Injection Controller Routing JavaScript Validation SPA JSON

5 ???

6 Co to ten AngularJS ? AngularJS jest w 100% javascript-owym framework-iem (SPA – Single Page Appliction) działającym po stronie klienckiej stworzonym przez Google, który kompatybilny jest z przeglądarkami desktop-owymi oraz mobilnymi. Z racji swojej wielkości często mylnie nazywany biblioteką. Umożliwia wdrożenie wzorca MVC (Model-View-Controller). Jedną z rzeczy, którą od razu wyróżnia jest to, że posiada własny kompilator HTML, przez możemy nauczyć go (html-a) nowych sztuczek.

7

8 Pobieramy Angularjs ze strony domowej http://angularjs.orgPobieramy plik js w najnowszej wersji tutaj! Po pobraniu +1 do magii Angulara

9 Zaczynamy… Plik html $scope to element łączący (klej)między widokiem a kontrolerem Kod js mający dostęp do $scope i zarządzający nim

10 Dyrektywy (Directive)Uczą HTML nowych trików NASZE WŁASNE!!! +10 do magii Angulara ng-app ng-show ng-model ng-bind

11 Połączmy to co wiemy w całośćA teraz to co misie lubią najbardziej.. Miodzio kodzik! 

12 Magia angulara..

Umieszczamy skrypt angulara na stronie Definiujemy kontroler o nazwie PierwszyKontroler Umieszczamy dyrektywę ng-app informującą angulara o miejscu rozpoczęcia jego pracy Wykonanie polecenia zawartego w nawiasach angulara { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/12/Magia+angulara..+%3Chtml%3E+%3Chead%3E.jpg", "name": "Magia angulara.. ", "description": " function PierwszyKontroler($scope){ $scope.powitanie = Hello AngularJS ; } To nasza pierwsza przygoda z AngularJS! Przywitajmy się: {{powitanie}} Umieszczamy skrypt angulara na stronie. Definiujemy kontroler o nazwie PierwszyKontroler. Umieszczamy dyrektywę ng-app informującą angulara o miejscu rozpoczęcia jego pracy. Wykonanie polecenia zawartego w nawiasach angulara.", "width": "800" }

13 Co tu się wydarzyło? Angular automatycznie inicjuje się po zdarzeniu DOMContentLoaded lub . Od tego momentu angular szuka dyrektywy ng-app, która oznacza root aplikacji. Jeżeli angular ją znajdzie: Ładuje moduł związany z dyrektywą Tworzy wstrzykiwacz aplikacji („injector application”) Kompiluje DOM traktująć dyrektywy ng-app jako korzeń kompilacji. To pozwala, aby tylko część DOM traktować jako aplikację angulara.

14 WSTRzykiwanie zależności (DEPENDENCY INJECTION)function PierwszyKontroler($scope){ $scope.powitanie = 'Hello AngularJS'; } Wstrzykiwanie zależności wykonujemy poprzez dodanie jej jako parametr funkcji kontrolera. Zależności rozpoznawane są po nazwie! Uwaga: W przypadku późniejszej minimalizacji plików i zmiany nazw parametrów wstrzyknięcia nie zadziałają w powyższej formie. Musimy zdefiniować dla angularowego injectora nazwy wstrzykiwanych zależności. PierwszyKontroler['$inject'] = ['$scope’]; Jest jeszcze druga możliwość – o niej później.

15 Data binding Two way data binding - wszelkie zmiany w widoku są natychmiast odzwierciedlane w modelu(kontrolerze), a wszelkie zmiany w modelu(kontrolerze) są propagowane do widoku. To sprawia, że widok jest graficzną projekcją modelu(danych w kontrolerze).

16

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/16/%3Chtml%3E+%3Chead%3E+%3Cscript+src%3D+..%2Fangular-1.2.0.min.js+%3E%3C%2Fscript%3E+%3Cscript%3E+function+DataBindingKontroler%28%24scope%29%7B.jpg", "name": " function DataBindingKontroler($scope){", "description": "$scope.imie; } Data-binding Pierwszy sposób: Drugi sposób: {{imie}} "> 17 Kolejne przykłady… ng-repeat, WALIDACJA i Filtry { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/17/Kolejne+przyk%C5%82ady%E2%80%A6+ng-repeat%2C+WALIDACJA+i+Filtry.jpg", "name": "Kolejne przykłady… ng-repeat, WALIDACJA i Filtry", "description": "Kolejne przykłady… ng-repeat, WALIDACJA i Filtry", "width": "800" } 18 Moduł var app = angular.module('Routing',[]); app.config(function($routeProvider){ $routeProvider.when('/part1', {templateUrl:'./partial1.html',controller:'partial1Controller'}) .when('/part2/:id', {templateUrl:'./partial2.html',controller:'partial2Controller'}) .when('/part3', {templateUrl:'./partial3.html',controller:'partial3Controller'}) .otherwise({redirectTo:'/part1'}); }); Tworzymy modul angulara. Jego nazwę umieszczamy w dyrektywie ng-app. Konfigurujemy nasz moduł przy pomocy routeProvider-a, który umożliwia nam tworzenie podstron w naszej aplikacji. Angular JS posiada funkcjonalność parsowania adresu podanego w przeglądarce i na podstawie niego wyświetla odpowiednią treść. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/18/Modu%C5%82+var+app+%3D+angular.module%28+Routing+%2C%5B%5D%29%3B+app.config%28function%28%24routeProvider%29%7B+%24routeProvider.when%28+%2Fpart1+%2C.jpg", "name": "Moduł var app = angular.module( Routing ,[]); app.config(function($routeProvider){ $routeProvider.when( /part1 ,", "description": "{templateUrl: ./partial1.html ,controller: partial1Controller }) .when( /part2/:id , {templateUrl: ./partial2.html ,controller: partial2Controller }) .when( /part3 , {templateUrl: ./partial3.html ,controller: partial3Controller }) .otherwise({redirectTo: /part1 }); }); Tworzymy modul angulara. Jego nazwę umieszczamy w dyrektywie ng-app. Konfigurujemy nasz moduł przy pomocy routeProvider-a, który umożliwia nam tworzenie podstron w naszej aplikacji. Angular JS posiada funkcjonalność parsowania adresu podanego w przeglądarce i na podstawie niego wyświetla odpowiednią treść.", "width": "800" } 19 ROUTING …/nazwaNaszejAplikacji#/part1 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/19/ROUTING+%E2%80%A6%2FnazwaNaszejAplikacji%23%2Fpart1.jpg", "name": "ROUTING …/nazwaNaszejAplikacji#/part1", "description": "ROUTING …/nazwaNaszejAplikacji#/part1", "width": "800" } 20 HTML na dopalaczach – dyrektywyng-app ng-show ng-if ng-repeat ng-view ng-model … { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/20/HTML+na+dopalaczach+%E2%80%93+dyrektywy.jpg", "name": "HTML na dopalaczach – dyrektywy", "description": "ng-app. ng-show. ng-if. ng-repeat. ng-view. ng-model. …", "width": "800" } 21 Własne dyrektywy Tworzenie własnej dyrektywy polega na zdefiniowaniu obiektu dyrektywy i przekazaniu jej modułowi aplikacji: var myModule = angular.module(...); myModule.directive('directiveName', function (injectables) { var directiveDefinitionObject = {…} }; return directiveDefinitionObject; }); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/21/W%C5%82asne+dyrektywy+Tworzenie+w%C5%82asnej+dyrektywy+polega+na+zdefiniowaniu+obiektu+dyrektywy+i+przekazaniu+jej+modu%C5%82owi+aplikacji%3A.jpg", "name": "Własne dyrektywy Tworzenie własnej dyrektywy polega na zdefiniowaniu obiektu dyrektywy i przekazaniu jej modułowi aplikacji:", "description": "var myModule = angular.module(...); myModule.directive( directiveName , function (injectables) { var directiveDefinitionObject = {…} }; return directiveDefinitionObject; });", "width": "800" } 22 Obiekt dyrektywy - parametryrestrict – definiuje typ dyrektywy E – element (tak jak np. span) A – atrybut (tak jak np. class) C – klasa (nazwa klasy) M – komentarz priority – ustala priorytet dyrektywy w przypadku kilku dyrektyw przy jednym elemencie terminal – jeżeli ustawiony na true to obecny priorytet dyrektywy będzie ostatnim jaki zostanie wykonany(dyrektywy z mniejszym priorytetem nie zostaną uruchomione) template – zamienia obecny element na zdefiniowany w tym parametrze kod html. Wszystkie atrybuty i klasy zostają skopiowane do nowego elementu. templateUrl – to samo co template tylko zawartość html jest pobierana z podanego adresu. replace – jeżeli ustawiony na true to template labo templateUrl nadpisuje, a nie dopisuje zawartość. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/22/Obiekt+dyrektywy+-+parametry.jpg", "name": "Obiekt dyrektywy - parametry", "description": "restrict – definiuje typ dyrektywy. E – element (tak jak np. span) A – atrybut (tak jak np. class) C – klasa (nazwa klasy) M – komentarz. priority – ustala priorytet dyrektywy w przypadku kilku dyrektyw przy jednym elemencie. terminal – jeżeli ustawiony na true to obecny priorytet dyrektywy będzie ostatnim jaki zostanie wykonany(dyrektywy z mniejszym priorytetem nie zostaną uruchomione) template – zamienia obecny element na zdefiniowany w tym parametrze kod html. Wszystkie atrybuty i klasy zostają skopiowane do nowego elementu. templateUrl – to samo co template tylko zawartość html jest pobierana z podanego adresu. replace – jeżeli ustawiony na true to template labo templateUrl nadpisuje, a nie dopisuje zawartość.", "width": "800" } 23 Obiekt dyrektywy – parametry cd.scope – parametr ten opisuje w jaki sposób dyrektywa będzie defniowała scope: false – nie tworzy nowego scope tylko dzieli scope z rodzicem true – tworzy nowy scope „dziedzicząc” po rodzicu. Tworzony z prototypu rodzica. {} – definiuje odizolowany scope, do którego możemy przekazywać dane za pomocą atrybutów elementu 3 rodzaje tych parametrów: @ - wartość przekazana jako string = - łączy (two way binding) zmienne w odizolowanym scope-ie i rodzicem & - łączy metodę z rodzica, którą odizolowany scope może wykonać controller – tworzymy kontroler dla dyrektywy. Metody i właściwości mogą być dostępne przez wstrzyknięcie do innej dyrektywy za pomocą parametru reqiure require – umożliwia przekazaniu kontrolera zdefiniowanej w parametrze dyrektywy. Nazwe dyrektywy możemy poprzedzić ? – nie wywoluje błędu, umożliwia opcjonalne wstrzyknięcie albo ^ - szuka kontrolera w rodzicach elementu { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/23/Obiekt+dyrektywy+%E2%80%93+parametry+cd..jpg", "name": "Obiekt dyrektywy – parametry cd.", "description": "scope – parametr ten opisuje w jaki sposób dyrektywa będzie defniowała scope: false – nie tworzy nowego scope tylko dzieli scope z rodzicem. true – tworzy nowy scope „dziedzicząc po rodzicu. Tworzony z prototypu rodzica. {} – definiuje odizolowany scope, do którego możemy przekazywać dane za pomocą atrybutów elementu. 3 rodzaje tych parametrów: @ - wartość przekazana jako string. = - łączy (two way binding) zmienne w odizolowanym scope-ie i rodzicem. & - łączy metodę z rodzica, którą odizolowany scope może wykonać. controller – tworzymy kontroler dla dyrektywy. Metody i właściwości mogą być dostępne przez wstrzyknięcie do innej dyrektywy za pomocą parametru reqiure. require – umożliwia przekazaniu kontrolera zdefiniowanej w parametrze dyrektywy. Nazwe dyrektywy możemy poprzedzić – nie wywoluje błędu, umożliwia opcjonalne wstrzyknięcie albo ^ - szuka kontrolera w rodzicach elementu.", "width": "800" } 24 Obiekt dyrektywy – parametry cd.compile – funkcja umożliwiająca manipulacje DOM. Wykonywana tylko raz przy kompilacji np. compile function(tElement, tAttrs) { tElement.append('Added during compilation phase!'); } link – funkcja łącząca DOM ze scope(two way binding). Wykonywana za każdym razem przy zmianie modelu. np. link: function(scope, element, attrs) { if (element.hasClass('btn')) { element.addClass('btn-primary'); Czas najwyższy na przykłady.. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/24/Obiekt+dyrektywy+%E2%80%93+parametry+cd..jpg", "name": "Obiekt dyrektywy – parametry cd.", "description": "compile – funkcja umożliwiająca manipulacje DOM. Wykonywana tylko raz przy kompilacji. np. compile function(tElement, tAttrs) { tElement.append( Added during compilation phase! ); } link – funkcja łącząca DOM ze scope(two way binding). Wykonywana za każdym razem przy zmianie modelu. np. link: function(scope, element, attrs) { if (element.hasClass( btn )) { element.addClass( btn-primary ); Czas najwyższy na przykłady..", "width": "800" } 25 Pytania i ZADANIA Napisać filtr do odwracania tekstuNapisać dyrektywę podmieniającą element na tekst Hello ANGULAR Napisać dyrektywę podmieniającą element z atrybutem my-widget na tekst ustawiony jako wartość tego atrybutu Napisać Dyrektywę powielającą zawartość elementu nrepeats tyle razy ile wsKaZuje atrybut tego elementu { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/25/Pytania+i+ZADANIA+Napisa%C4%87+filtr+do+odwracania+tekstu.jpg", "name": "Pytania i ZADANIA Napisać filtr do odwracania tekstu", "description": "Napisać dyrektywę podmieniającą element na tekst Hello ANGULAR. Napisać dyrektywę podmieniającą element z atrybutem my-widget na tekst ustawiony jako wartość tego atrybutu. Napisać Dyrektywę powielającą zawartość elementu nrepeats tyle razy ile wsKaZuje atrybut tego elementu.", "width": "800" } 26 Seam + RESTEASY – jak to zrobić?Dodać biblioteki do projektu Dodać spis dodanych biblioteki do pliku deployed-jars-ear.list EWENTUALNIE DODAĆ do pliku web.xml odpowiednie wpisy – definiowanie wzorca url dla naszych zapytań restowych Utworzyć obiekt z odpowiednią adotacją Utworzyć w obiekcie metodę odpowiadającą na zapytanie restowe Cieszyć się z API restowego w naszej aplikacji  { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/26/Seam+%2B+RESTEASY+%E2%80%93+jak+to+zrobi%C4%87.jpg", "name": "Seam + RESTEASY – jak to zrobić", "description": "Dodać biblioteki do projektu. Dodać spis dodanych biblioteki do pliku deployed-jars-ear.list. EWENTUALNIE DODAĆ do pliku web.xml odpowiednie wpisy – definiowanie wzorca url dla naszych zapytań restowych. Utworzyć obiekt z odpowiednią adotacją. Utworzyć w obiekcie metodę odpowiadającą na zapytanie restowe. Cieszyć się z API restowego w naszej aplikacji ", "width": "800" } 27 Opis klasy jako usługi RESTKlasa, która będzie wystawiać usługę typu REST powinna posiadać wskazaniem ścieżki pod jaką będzie widoczna usługa. Dodatkowo wskazujemy metodę, która będzie się wykonywać w momencie wywołania. Do tego celu wykorzystujemy itd.) z pakietu javax.ws.rs. Dzięki temu możemy określić różne metody dla różnych typów wywołań (GET/POST/PUT/HEAD/...) REST'a. @javax.ws.rs.Produces z określeniem w jakim formacie będzie prezentowany wynik. Do dyspozycji mamy dwa popularne formaty: json ("application/json") i xml ("text/xml"). { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/27/Opis+klasy+jako+us%C5%82ugi+REST.jpg", "name": "Opis klasy jako usługi REST", "description": "Klasa, która będzie wystawiać usługę typu REST powinna posiadać adnotację @javax.ws.rs.Path ze wskazaniem ścieżki pod jaką będzie widoczna usługa. Dodatkowo wskazujemy metodę, która będzie się wykonywać w momencie wywołania. Do tego celu wykorzystujemy adnotacje:@GET (lub @POST, @HEAD, @PUT, itd.) z pakietu javax.ws.rs. Dzięki temu możemy określić różne metody dla różnych typów wywołań (GET/POST/PUT/HEAD/...) REST a. @javax.ws.rs.Produces z określeniem w jakim formacie będzie prezentowany wynik. Do dyspozycji mamy dwa popularne formaty: json ( application/json ) i xml ( text/xml ).", "width": "800" } 28 JSON – javascript object notationJSON - lekki format wymiany danych komputerowych. JSON jest formatem tekstowym, będącym podzbiorem języka JavaScript. Typ MIME dla formatu JSON to application/json. { „nazwa”:”Jakas nazwa”, „wartosc”:150, „lista”:[{„1”,”2”,”3”}]. „obiekt”:{„nazwa”:”nazwa1”,”kod”:15} } { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/28/JSON+%E2%80%93+javascript+object+notation.jpg", "name": "JSON – javascript object notation", "description": "JSON - lekki format wymiany danych komputerowych. JSON jest formatem tekstowym, będącym podzbiorem języka JavaScript. Typ MIME dla formatu JSON to application/json. { „nazwa : Jakas nazwa , „wartosc :150, „lista :[{„1 , 2 , 3 }]. „obiekt :{„nazwa : nazwa1 , kod :15} }", "width": "800" } 29 JSON i XML {"menu": { "id": "file","value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/29/JSON+i+XML+%7B+menu+%3A+%7B+id+%3A+file+%2C.jpg", "name": "JSON i XML { menu : { id : file ,", "description": "value : File , popup : { menuitem : [ { value : New , onclick : CreateNewDoc() }, { value : Open , onclick : OpenDoc() }, { value : Close , onclick : CloseDoc() } ] } }} ", "width": "800" } 30 Przykład klasy odpowiadającej na zapytanie restowe@Path("configResource") @Name("configResource") public class ConfigResource extends SecurityInvoiceResource { @In(create = true) ConfigResourceAction configResourceAction; @GET @Path("/config/{invoiceId}") @Produces({ MediaType.APPLICATION_JSON }) public Response final long invoiceId) { if (correctStatus(getInitStatus()) && correctRole(invoiceId)) { return buildResponse(configResourceAction.getConfiguration(invoiceId)); } return buildResponse(getInitStatus()); Adres do odwołania się do usługi: ../configResource/config/123 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/30/Przyk%C5%82ad+klasy+odpowiadaj%C4%85cej+na+zapytanie+restowe.jpg", "name": "Przykład klasy odpowiadającej na zapytanie restowe", "description": "@Path( configResource ) @Name( configResource ) public class ConfigResource extends SecurityInvoiceResource { @In(create = true) ConfigResourceAction configResourceAction; @GET. @Path( /config/{invoiceId} ) @Produces({ MediaType.APPLICATION_JSON }) public Response getEditorConfiguration(@PathParam( invoiceId ) final long invoiceId) { if (correctStatus(getInitStatus()) && correctRole(invoiceId)) { return buildResponse(configResourceAction.getConfiguration(invoiceId)); } return buildResponse(getInitStatus()); Adres do odwołania się do usługi: ../configResource/config/123.", "width": "800" } 31 Jak to teraz połączyć z angularjsZapisz() Pobierz() { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/31/Jak+to+teraz+po%C5%82%C4%85czy%C4%87+z+angularjs.jpg", "name": "Jak to teraz połączyć z angularjs", "description": "Zapisz() Pobierz()", "width": "800" } 32 Service & Factory Tych elementów angulara używamy zazwyczaj do definiowania modelu(danych) w MVC czyli jak i skąd mamy pobierać dane dla naszej aplikacji. Serwisy i fabryki używane są do wymiany danych między kontrolerami dzięki bardzo prostemu mechanizmowi wstrzykiwania zależności. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/32/Service+%26+Factory.jpg", "name": "Service & Factory", "description": "Tych elementów angulara używamy zazwyczaj do definiowania modelu(danych) w MVC czyli jak i skąd mamy pobierać dane dla naszej aplikacji. Serwisy i fabryki używane są do wymiany danych między kontrolerami dzięki bardzo prostemu mechanizmowi wstrzykiwania zależności.", "width": "800" } 33 function HelloCtrl($scope, testService, testFactory){ $scope.fromService = testService.sayHello("World"); $scope.fromFactory = testFactory.sayHello("World"); } function GoodbyeCtrl($scope, testService, testFactory) $scope.fromService = testService.sayGoodbye("World"); $scope.fromFactory = testFactory.sayGoodbye("World"); app.factory('testFactory', function(){ return { sayHello: function(text){ return "Factory says \"Hello " + text + "\""; }, sayGoodbye: function(text){ return "Factory says \"Goodbye " + text + "\""; } }); app.service('testService', function(){ this.sayHello= function(text){ return "Service says \"Hello " + text + "\""; }; this.sayGoodbye = function(text){ return "Service says \"Goodbye " + text + "\""; Różnica polega na tym, że serwis zwraca funkcję z parametru, a fabryka obiekt zwracany przez funkcję z parametru. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/33/function+HelloCtrl%28%24scope%2C+testService%2C+testFactory%29.jpg", "name": "function HelloCtrl($scope, testService, testFactory)", "description": "{ $scope.fromService = testService.sayHello( World ); $scope.fromFactory = testFactory.sayHello( World ); } function GoodbyeCtrl($scope, testService, testFactory) $scope.fromService = testService.sayGoodbye( World ); $scope.fromFactory = testFactory.sayGoodbye( World ); app.factory( testFactory , function(){ return { sayHello: function(text){ return Factory says \ Hello + text + \ ; }, sayGoodbye: function(text){ return Factory says \ Goodbye + text + \ ; } }); app.service( testService , function(){ this.sayHello= function(text){ return Service says \ Hello + text + \ ; }; this.sayGoodbye = function(text){ return Service says \ Goodbye + text + \ ; Różnica polega na tym, że serwis zwraca funkcję z parametru, a fabryka obiekt zwracany przez funkcję z parametru.", "width": "800" } 34 Wykorzystanie $http i $resourceapp.factory('ConfigService', function($resource) { return $resource('/seam/resource/rest/configResource/config/:invoiceHeaderId', }); { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} }; Dodatkowe metody obiektu zwracanego przez $resource $scope.config = ConfigService.get({invoiceHeaderId:$routeParams.id}, function(){console.log(„Udane pobranie”)}, function(data){console.log(„Błąd”)}); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/34/Wykorzystanie+%24http+i+%24resource.jpg", "name": "Wykorzystanie $http i $resource", "description": "app.factory( ConfigService , function($resource) { return $resource( /seam/resource/rest/configResource/config/:invoiceHeaderId , {invoiceHeaderId: @invoiceHeaderId }); }); { get : {method: GET }, save : {method: POST }, query : {method: GET , isArray:true}, remove : {method: DELETE }, delete : {method: DELETE } }; Dodatkowe metody obiektu zwracanego przez $resource. $scope.config = ConfigService.get({invoiceHeaderId:$routeParams.id}, function(){console.log(„Udane pobranie )}, function(data){console.log(„Błąd )});", "width": "800" } 35 AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestAction ControlerSeam business { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/35/AngularJS+JBOSS+%2B+RESTEASY+HTTP+View+Factory+Rest+RestAction+Controler.jpg", "name": "AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestAction Controler", "description": "Seam business.", "width": "800" } 36 AppJS AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestActionControler Seam business { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/36/AppJS+AngularJS+JBOSS+%2B+RESTEASY+HTTP+View+Factory+Rest+RestAction.jpg", "name": "AppJS AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestAction", "description": "Controler. Seam business.", "width": "800" } 37 Struktura Dużego projektu Angularjsroot-app-folder index.html scripts controllers main.js ... directives myDirective.js filters myFilter.js services myService.js libs angular.js angular.min.js app.js styles views main.html { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216512/3/images/37/Struktura+Du%C5%BCego+projektu+Angularjs.jpg", "name": "Struktura Dużego projektu Angularjs", "description": "root-app-folder. index.html. scripts. controllers. main.js. ... directives. myDirective.js. filters. myFilter.js. services. myService.js. libs. angular.js. angular.min.js. app.js. styles. views. main.html.", "width": "800" } 38 Przydatne linki, książki i narzędziaStrona domowa: Przydatne linki: https://egghead.io/lessons - zbiór video tutoriali https://leanpub.com/recipes-with-angular-js/read#leanpub-auto-introduction – zbiór przykładów zastosować AngularJS Książki – „AngularJS” (O’REILLY) i pdf „AngularJS In 60 Minutes” dodane do źródeł Narzędzia: AngularJS Baratang – do debugowania aplikacji Narzędzia do testowania - Jasmine

17 Kolejne przykłady… ng-repeat, WALIDACJA i Filtry

18 Moduł var app = angular.module('Routing',[]); app.config(function($routeProvider){ $routeProvider.when('/part1', {templateUrl:'./partial1.html',controller:'partial1Controller'}) .when('/part2/:id', {templateUrl:'./partial2.html',controller:'partial2Controller'}) .when('/part3', {templateUrl:'./partial3.html',controller:'partial3Controller'}) .otherwise({redirectTo:'/part1'}); }); Tworzymy modul angulara. Jego nazwę umieszczamy w dyrektywie ng-app. Konfigurujemy nasz moduł przy pomocy routeProvider-a, który umożliwia nam tworzenie podstron w naszej aplikacji. Angular JS posiada funkcjonalność parsowania adresu podanego w przeglądarce i na podstawie niego wyświetla odpowiednią treść.

19 ROUTING …/nazwaNaszejAplikacji#/part1

20 HTML na dopalaczach – dyrektywyng-app ng-show ng-if ng-repeat ng-view ng-model …

21 Własne dyrektywy Tworzenie własnej dyrektywy polega na zdefiniowaniu obiektu dyrektywy i przekazaniu jej modułowi aplikacji: var myModule = angular.module(...); myModule.directive('directiveName', function (injectables) { var directiveDefinitionObject = {…} }; return directiveDefinitionObject; });

22 Obiekt dyrektywy - parametryrestrict – definiuje typ dyrektywy E – element (tak jak np. span) A – atrybut (tak jak np. class) C – klasa (nazwa klasy) M – komentarz priority – ustala priorytet dyrektywy w przypadku kilku dyrektyw przy jednym elemencie terminal – jeżeli ustawiony na true to obecny priorytet dyrektywy będzie ostatnim jaki zostanie wykonany(dyrektywy z mniejszym priorytetem nie zostaną uruchomione) template – zamienia obecny element na zdefiniowany w tym parametrze kod html. Wszystkie atrybuty i klasy zostają skopiowane do nowego elementu. templateUrl – to samo co template tylko zawartość html jest pobierana z podanego adresu. replace – jeżeli ustawiony na true to template labo templateUrl nadpisuje, a nie dopisuje zawartość.

23 Obiekt dyrektywy – parametry cd.scope – parametr ten opisuje w jaki sposób dyrektywa będzie defniowała scope: false – nie tworzy nowego scope tylko dzieli scope z rodzicem true – tworzy nowy scope „dziedzicząc” po rodzicu. Tworzony z prototypu rodzica. {} – definiuje odizolowany scope, do którego możemy przekazywać dane za pomocą atrybutów elementu 3 rodzaje tych parametrów: @ - wartość przekazana jako string = - łączy (two way binding) zmienne w odizolowanym scope-ie i rodzicem & - łączy metodę z rodzica, którą odizolowany scope może wykonać controller – tworzymy kontroler dla dyrektywy. Metody i właściwości mogą być dostępne przez wstrzyknięcie do innej dyrektywy za pomocą parametru reqiure require – umożliwia przekazaniu kontrolera zdefiniowanej w parametrze dyrektywy. Nazwe dyrektywy możemy poprzedzić ? – nie wywoluje błędu, umożliwia opcjonalne wstrzyknięcie albo ^ - szuka kontrolera w rodzicach elementu

24 Obiekt dyrektywy – parametry cd.compile – funkcja umożliwiająca manipulacje DOM. Wykonywana tylko raz przy kompilacji np. compile function(tElement, tAttrs) { tElement.append('Added during compilation phase!'); } link – funkcja łącząca DOM ze scope(two way binding). Wykonywana za każdym razem przy zmianie modelu. np. link: function(scope, element, attrs) { if (element.hasClass('btn')) { element.addClass('btn-primary'); Czas najwyższy na przykłady..

25 Pytania i ZADANIA Napisać filtr do odwracania tekstuNapisać dyrektywę podmieniającą element na tekst Hello ANGULAR Napisać dyrektywę podmieniającą element z atrybutem my-widget na tekst ustawiony jako wartość tego atrybutu Napisać Dyrektywę powielającą zawartość elementu nrepeats tyle razy ile wsKaZuje atrybut tego elementu

26 Seam + RESTEASY – jak to zrobić?Dodać biblioteki do projektu Dodać spis dodanych biblioteki do pliku deployed-jars-ear.list EWENTUALNIE DODAĆ do pliku web.xml odpowiednie wpisy – definiowanie wzorca url dla naszych zapytań restowych Utworzyć obiekt z odpowiednią adotacją Utworzyć w obiekcie metodę odpowiadającą na zapytanie restowe Cieszyć się z API restowego w naszej aplikacji 

27 Opis klasy jako usługi RESTKlasa, która będzie wystawiać usługę typu REST powinna posiadać wskazaniem ścieżki pod jaką będzie widoczna usługa. Dodatkowo wskazujemy metodę, która będzie się wykonywać w momencie wywołania. Do tego celu wykorzystujemy itd.) z pakietu javax.ws.rs. Dzięki temu możemy określić różne metody dla różnych typów wywołań (GET/POST/PUT/HEAD/...) REST'a. @javax.ws.rs.Produces z określeniem w jakim formacie będzie prezentowany wynik. Do dyspozycji mamy dwa popularne formaty: json ("application/json") i xml ("text/xml").

28 JSON – javascript object notationJSON - lekki format wymiany danych komputerowych. JSON jest formatem tekstowym, będącym podzbiorem języka JavaScript. Typ MIME dla formatu JSON to application/json. { „nazwa”:”Jakas nazwa”, „wartosc”:150, „lista”:[{„1”,”2”,”3”}]. „obiekt”:{„nazwa”:”nazwa1”,”kod”:15} }

29 JSON i XML {"menu": { "id": "file","value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

30 Przykład klasy odpowiadającej na zapytanie restowe@Path("configResource") @Name("configResource") public class ConfigResource extends SecurityInvoiceResource { @In(create = true) ConfigResourceAction configResourceAction; @GET @Path("/config/{invoiceId}") @Produces({ MediaType.APPLICATION_JSON }) public Response final long invoiceId) { if (correctStatus(getInitStatus()) && correctRole(invoiceId)) { return buildResponse(configResourceAction.getConfiguration(invoiceId)); } return buildResponse(getInitStatus()); Adres do odwołania się do usługi: ../configResource/config/123

31 Jak to teraz połączyć z angularjsZapisz() Pobierz()

32 Service & Factory Tych elementów angulara używamy zazwyczaj do definiowania modelu(danych) w MVC czyli jak i skąd mamy pobierać dane dla naszej aplikacji. Serwisy i fabryki używane są do wymiany danych między kontrolerami dzięki bardzo prostemu mechanizmowi wstrzykiwania zależności.

33 function HelloCtrl($scope, testService, testFactory){ $scope.fromService = testService.sayHello("World"); $scope.fromFactory = testFactory.sayHello("World"); } function GoodbyeCtrl($scope, testService, testFactory) $scope.fromService = testService.sayGoodbye("World"); $scope.fromFactory = testFactory.sayGoodbye("World"); app.factory('testFactory', function(){ return { sayHello: function(text){ return "Factory says \"Hello " + text + "\""; }, sayGoodbye: function(text){ return "Factory says \"Goodbye " + text + "\""; } }); app.service('testService', function(){ this.sayHello= function(text){ return "Service says \"Hello " + text + "\""; }; this.sayGoodbye = function(text){ return "Service says \"Goodbye " + text + "\""; Różnica polega na tym, że serwis zwraca funkcję z parametru, a fabryka obiekt zwracany przez funkcję z parametru.

34 Wykorzystanie $http i $resourceapp.factory('ConfigService', function($resource) { return $resource('/seam/resource/rest/configResource/config/:invoiceHeaderId', }); { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} }; Dodatkowe metody obiektu zwracanego przez $resource $scope.config = ConfigService.get({invoiceHeaderId:$routeParams.id}, function(){console.log(„Udane pobranie”)}, function(data){console.log(„Błąd”)});

35 AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestAction ControlerSeam business

36 AppJS AngularJS JBOSS + RESTEASY HTTP View Factory Rest RestActionControler Seam business

37 Struktura Dużego projektu Angularjsroot-app-folder index.html scripts controllers main.js ... directives myDirective.js filters myFilter.js services myService.js libs angular.js angular.min.js app.js styles views main.html

38 Przydatne linki, książki i narzędziaStrona domowa: Przydatne linki: https://egghead.io/lessons - zbiór video tutoriali https://leanpub.com/recipes-with-angular-js/read#leanpub-auto-introduction – zbiór przykładów zastosować AngularJS Książki – „AngularJS” (O’REILLY) i pdf „AngularJS In 60 Minutes” dodane do źródeł Narzędzia: AngularJS Baratang – do debugowania aplikacji Narzędzia do testowania - Jasmine