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…

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

8 POBIERAMY ANGULARJS ZE STRONY DOMOWEJ 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 - 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Ć 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 @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/...) 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 public class ConfigResource extends SecurityInvoiceResource = true) @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 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', }); $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: 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