Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

MATEUSZ UHEREK. AGENDA AngularJS REST-owe API w aplikacji Seam Komunikacja AngularJS z serwerem RESTEasy (wbudowanym w serwer JBoss) Przykłady aplikacji.

Podobne prezentacje


Prezentacja na temat: "MATEUSZ UHEREK. AGENDA AngularJS REST-owe API w aplikacji Seam Komunikacja AngularJS z serwerem RESTEasy (wbudowanym w serwer JBoss) Przykłady aplikacji."— Zapis prezentacji:

1 MATEUSZ UHEREK

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

3 ZACZYNAMY… 3..2..1..

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

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 http://angularjs.org

8 POBIERAMY ANGULARJS ZE STRONY DOMOWEJ http://angularjs.org Pobieramy 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 ng-app ng-show ng-modelng-bind NASZE WŁASNE!!! +10 do magii Angulara

11 POŁĄCZMY TO CO WIEMY W CAŁOŚĆ A teraz to co misie lubią najbardziej.. Miodzio kodzik!

12 function PierwszyKontroler($scope){ $scope.powitanie = 'Hello AngularJS'; } To nasza pierwsza przygoda z AngularJS! Przywitajmy się: {{powitanie}} 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

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. function PierwszyKontroler($scope){ $scope.powitanie = 'Hello AngularJS'; } 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 function DataBindingKontroler($scope){ $scope.imie; } Data-binding Pierwszy sposób: Drugi sposób: {{imie}}

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 …/nazwaNaszejAplikacji#/part2/123 …/nazwaNaszejAplikacji#/part3

20 HTML NA DOPALACZACH – DYREKTYWY ng-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 - PARAMETRY 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ść.

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 TEKSTU 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

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 REST 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").

28 JSON – JAVASCRIPT OBJECT NOTATION 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.JavaScriptMIME { 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 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

31 JAK TO TERAZ POŁĄCZYĆ Z ANGULARJS Zapisz() 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 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 + "\""; }; }); 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"); } Różnica polega na tym, że serwis zwraca funkcję z parametru, a fabryka obiekt zwracany przez funkcję z parametru.

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

35 Controler View FactoryRestRestAction Seam business HTTP AngularJS JBOSS + RESTEASY

36 Controler View FactoryRestRestAction Seam business HTTP AngularJS JBOSS + RESTEASY AppJS

37 STRUKTURA DUŻEGO PROJEKTU ANGULARJS 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...

38 PRZYDATNE LINKI, KSIĄŻKI I NARZĘDZIA Strona domowa: http://angularjs.orghttp://angularjs.org Przydatne linki: https://egghead.io/lessons - zbiór video tutorialihttps://egghead.io/lessons https://leanpub.com/recipes-with-angular-js/read#leanpub-auto-introduction – zbiór przykładów zastosować AngularJS https://leanpub.com/recipes-with-angular-js/read#leanpub-auto-introduction Książki – AngularJS (OREILLY) i pdf AngularJS In 60 Minutes dodane do źródeł Narzędzia: AngularJS Baratang – do debugowania aplikacji Narzędzia do testowania - Jasmine


Pobierz ppt "MATEUSZ UHEREK. AGENDA AngularJS REST-owe API w aplikacji Seam Komunikacja AngularJS z serwerem RESTEasy (wbudowanym w serwer JBoss) Przykłady aplikacji."

Podobne prezentacje


Reklamy Google