AJAX to krótka forma asynchronicznego języka JavaScript i XML. AJAX został zaprojektowany przede wszystkim do aktualizowania części strony internetowej, bez przeładowywania całej strony.
Powodem zaprojektowania tej technologii było zmniejszenie liczby podróży w obie strony między klientem a serwerem oraz liczby odświeżeń całej strony, które miały miejsce, gdy użytkownik wymagał pewnych informacji.
AJAX umożliwił asynchroniczne aktualizowanie stron internetowych poprzez wymianę niewielkich ilości danych z serwerem w tle. Oznaczało to, że można było aktualizować części strony internetowej bez przeładowywania całej strony.
Wiele współczesnych aplikacji internetowych stosuje tę technikę do odświeżania strony lub pobierania danych z serwera.
W tym samouczku nauczysz się:
- Wysokopoziomowe interakcje z serwerami używającymi $ resource
- Niskopoziomowe interakcje serwera z $ http
- Pobieranie danych z serwera obsługującego SQL i MySQL
Wysokopoziomowe interakcje z serwerami używającymi $ resource
Angular udostępnia dwa różne interfejsy API do obsługi żądań Ajax. Oni są
- $ zasób
- $ http
Przyjrzymy się właściwości „$ resource” w Angular, która służy do interakcji z serwerami na wysokim poziomie.
Kiedy mówimy o interakcji na wyższym poziomie, oznacza to, że będziemy się przejmować tylko tym, co serwer ma do zaoferowania w zakresie funkcjonalności, a nie tym, co dokładnie serwer robi w odniesieniu do tej funkcjonalności.
Na przykład, jeśli serwer hostował aplikację, która przechowuje informacje o pracownikach określonej firmy, serwer może udostępniać funkcje klientom, takim jak GetEmployeeDetails, SetEmployeeDetails itp.
Tak więc na wysokim poziomie wiemy, co mogą zrobić te dwie funkcje, i możemy je wywołać za pomocą właściwości $ resource. Ale wtedy nie znamy dokładnie szczegółów funkcji „GetEmployeeDetails” i „SetEmployeeDetails” oraz sposobu ich implementacji.
Powyższe wyjaśnienie wyjaśnia, co jest znane jako architektura oparta na REST.
- REST jest znany jako Representational State Transfer, która jest architekturą stosowaną w wielu nowoczesnych systemach internetowych.
- Oznacza to, że możesz używać normalnych czasowników HTTP GET, POST, PUT i DELETE do pracy z aplikacją internetową.
Załóżmy więc, że mamy aplikację internetową, która obsługuje listę zdarzeń.
Gdybyśmy chcieli dostać się do listy wszystkich wydarzeń,
- Aplikacja internetowa może udostępniać adres URL, taki jak http: // example / events i
- Możemy użyć czasownika „GET”, aby uzyskać pełną listę zdarzeń, jeśli aplikacja jest zgodna z architekturą opartą na REST.
Na przykład, jeśli było zdarzenie o identyfikatorze 1, możemy uzyskać szczegóły tego zdarzenia za pośrednictwem adresu URL. http: // przykład / events / 1
Co to jest obiekt $ resource
Obiekt $ resource w Angular pomaga w pracy z serwerami obsługującymi aplikacje w architekturze opartej na REST.
Poniżej podano podstawową składnię instrukcji @resource wraz z różnymi funkcjami
Składnia instrukcji @resource
var resource Object = $resource(url);
Gdy masz już pod ręką resourceObject, możesz użyć poniższych funkcji, aby wykonać wymagane wywołania REST.
1. get ([params], [success], [error]) - można tego użyć do wykonania standardowego wywołania GET.
2. save ([params], postData, [success], [error]) - można tego użyć do wykonania standardowego wywołania POST.
3. zapytanie ([parametry], [sukces], [błąd]) - można tego użyć do wykonania standardowego wywołania GET, ale jako część odpowiedzi zwracana jest tablica.
4. remove ([params], postData, [success], [error]) - To może być użyte do wykonania standardowego wywołania DELETE.
We wszystkich funkcjach podanych poniżej parametr „params” może służyć do podania wymaganych parametrów, które należy przekazać w adresie URL.
Na przykład,
- Załóżmy, że przekazujesz wartość Topic: „Angular” jako „parametr” w funkcji get as
- get (' http: // example / events ', '{Topic:' Angular '}')
- Adres URL http: // example / events? Topic = Angular jest wywoływany jako część funkcji get.
Jak używać właściwości $ resource
Aby użyć właściwości $ resource, należy wykonać następujące kroki:
Krok 1) Plik „angular-resource.js” należy pobrać ze strony Angular.JS i umieścić w aplikacji.
Krok 2) Moduł aplikacji powinien zadeklarować zależność od modułu „ngResource”, aby móc korzystać z zasobu $.
W poniższym przykładzie wywołujemy moduł „ngResource” z naszej aplikacji „DemoApp”.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Krok 3) Wywołanie funkcji $ resource () z punktem końcowym REST, jak pokazano w poniższym przykładzie.
Jeśli to zrobisz, obiekt $ resource będzie miał możliwość wywołania niezbędnej funkcjonalności udostępnianej przez punkty końcowe REST.
Poniższy przykład wywołuje adres URL punktu końcowego: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
W powyższym przykładzie wykonywane są następujące czynności
-
Podczas definiowania aplikacji Angular, usługa jest tworzona przy użyciu instrukcji „DemoApp.services”, gdzie DemoApp to nazwa nadana naszej aplikacji Angular.
-
Do tworzenia szczegółów tej nowej usługi używana jest metoda .factory.
-
„Wejście” to nazwa, którą nadajemy naszej usłudze, która może być dowolną nazwą, którą chcesz podać.
-
W tej usłudze tworzymy funkcję, która będzie wywoływać API $ resource
-
$ resource ('/ example / Event /: 1).
Funkcja $ zasób jest usługą używaną do wywoływania punktu końcowego REST. Punkt końcowy REST jest zwykle adresem URL. W powyższej funkcji używamy adresu URL (/ example / Event /: 1) jako naszego punktu końcowego REST. Nasz punkt końcowy REST (/ example / Event /: 1) oznacza, że aplikacja Event znajduje się na naszej stronie głównej „example”. Ta aplikacja Event została opracowana przy użyciu architektury opartej na protokole REST.
-
Wynikiem wywołania funkcji jest obiekt klasy zasobów. Obiekt zasobu będzie miał teraz funkcje (get (), query (), save (), remove (), delete ()), które można wywołać.
Krok 4) Możemy teraz użyć metod, które zostały zwrócone w powyższym kroku (którymi są get (), query (), save (), remove (), delete ()) w naszym kontrolerze.
W poniższym fragmencie kodu jako przykładu używamy funkcji get ()
Spójrzmy na kod, który może korzystać z funkcji get ().
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
W powyższym kroku
- Funkcja get () w powyższym fragmencie wysyła żądanie GET do / example / Event /: 1.
- Parametr: 1 w adresie URL jest zastępowany przez $ scope.id.
- Funkcja get () zwróci pusty obiekt, który jest wypełniany automatycznie, gdy rzeczywiste dane pochodzą z serwera.
- Drugi argument funkcji get () to wywołanie zwrotne, które jest wykonywane, gdy dane przychodzą z serwera. Możliwym wyjściem całego kodu byłby obiekt JSON, który zwróciłby listę zdarzeń ujawnionych z „przykładowej” witryny internetowej.
Przykład tego, co można zwrócić, przedstawiono poniżej
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Niskopoziomowe interakcje serwera z $ http
$ Http to kolejna usługa Angular JS, która służy do odczytywania danych ze zdalnych serwerów. Najpopularniejszą formą danych odczytywanych z serwerów są dane w formacie JSON.
Załóżmy, że mamy stronę PHP ( http: //example/angular/getTopics.PHP ), która zwraca następujące dane JSON
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Spójrzmy na kod AngularJS wykorzystujący $ http, który może być użyty do pobrania powyższych danych z serwera
W powyższym przykładzie
- Dodajemy usługę $ http do naszej funkcji kontrolera, abyśmy mogli użyć funkcji „get” usługi $ http.
- Używamy teraz funkcji get z usługi HTTP, aby pobrać obiekty JSON z adresu URL http: // example /angular/getTopics.PHP
- Na podstawie obiektu 'response' tworzymy funkcję zwrotną, która zwróci rekordy danych, a następnie przechowujemy je w obiekcie $ scope.
- Następnie możemy użyć zmiennej $ scope.names z kontrolera i użyć jej w naszym widoku, aby odpowiednio wyświetlić obiekty JSON.
Pobieranie danych z serwera obsługującego SQL i MySQL
Angular może być również używany do pobierania danych z serwera, na którym działa MySQL lub SQL.
Chodzi o to, że jeśli masz stronę PHP łączącą się z bazą danych MySQL lub stronę Asp.Net łączącą się z bazą danych serwera MS SQL, musisz upewnić się, że zarówno strona PHP, jak i strona ASP.Net renderują dane w formacie JSON.
Załóżmy, że mamy witrynę PHP ( http: // example /angular/getTopics.PHP ) obsługującą dane z bazy danych MySQL lub SQL.
Krok 1) Pierwszym krokiem jest upewnienie się, że strona PHP pobiera dane z bazy danych MySQL i udostępnia je w formacie JSON.
Krok 2) Napisz podobny kod pokazany powyżej, aby użyć usługi $ http do pobrania danych JSON.
Spójrzmy na kod AngularJS wykorzystujący $ http, który może być użyty do pobrania powyższych danych z serwera
Krok 3) Renderuj dane w swoim widoku za pomocą dyrektywy ng-repeat.
Poniżej używamy dyrektywy ng-repeat do przechodzenia przez każdą z par klucz-wartość w obiektach JSON zwracanych przez metodę „get” usługi $ http.
Dla każdego obiektu JSON wyświetlamy klucz, którym jest „Nazwa”, a wartością jest „Opis”.
{{x.Name}} {{x.Description}}
Podsumowanie:
- Przyjrzeliśmy się, czym jest architektura RESTFUL, która jest niczym innym jak funkcjonalnością udostępnianą przez aplikacje internetowe w oparciu o normalne czasowniki HTTP GET, POST, PUT i DELETE.
- Obiekt $ resource jest używany z Angularem do interakcji z aplikacjami sieciowymi RESTFUL na wysokim poziomie, co oznacza, że wywołujemy tylko funkcjonalność udostępnioną przez aplikację internetową, ale nie przejmujemy się tym, jak funkcjonalność jest implementowana.
- Przyjrzeliśmy się również usłudze $ http, której można użyć do pobierania danych z aplikacji internetowej. Jest to możliwe, ponieważ usługa $ http może współpracować z aplikacjami internetowymi na bardziej szczegółowym poziomie.
- Ze względu na moc usługi $ http można to wykorzystać do pobierania danych z MySQL lub MS SQL Server za pośrednictwem aplikacji PHP. Dane mogą być następnie renderowane w tabeli przy użyciu dyrektywy ng-repeat.
