AngularJS AJAX – wykonaj połączenie AJAX za pomocą $http

AngularJS-AJAX

AJAX to krótka forma asynchronicznego JavaSkrypt i XML. AJAX został zaprojektowany przede wszystkim w celu aktualizowania części strony internetowej, bez przeładowywania całej strony.

Powodem zaprojektowania tej technologii było zmniejszenie liczby podróży w obie strony pomiędzy klientem a serwerem oraz liczby odświeżeń całej strony, które miały miejsce, gdy użytkownik potrzebował określonych informacji.

AJAX umożliwiał asynchroniczną aktualizację stron internetowych poprzez wymianę niewielkich ilości danych z serwerem w tle. Oznaczało to, że możliwe było aktualizowanie części strony internetowej bez przeładowywania całej strony.

Wiele współczesnych aplikacji internetowych faktycznie wykorzystuje tę technikę do odświeżania strony lub pobierania danych z serwera.

Interakcje wysokiego poziomu z serwerami przy użyciu $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 Angularze, 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 szczegółowo w odniesieniu do tej funkcjonalności.

Na przykład, jeśli serwer hostuje aplikację przechowującą informacje o pracownikach określonej firmy, serwer może udostępniać funkcjonalność klientom, takim jak GetEmployeeDetails, SetEmployeeDetails itp.

Więc na wysokim poziomie wiemy, co te dwie funkcje potrafią zrobić 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” ani sposobu ich implementacji.

Powyższe wyjaśnienie dotyczy architektury znanej jako REST.

REST jest znany jako Representational State Transfer i 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 przechowuje listę Wydarzenia.

Gdybyśmy chcieli dostać się do listy wszystkich wydarzeń,

Aplikacja internetowa może udostępniać adres URL, taki jak http://example/events oraz
Możemy użyć polecenia „GET”, aby pobrać całą listę zdarzeń, jeśli aplikacja korzysta z architektury bazującej na REST.

Na przykład, jeśli istnieje zdarzenie o identyfikatorze 1, możemy uzyskać szczegóły tego zdarzenia poprzez adres URL. http://example/events/1

Co to jest obiekt $resource

Obiekt $resource w Angularze ułatwia pracę z serwerami, które obsługują aplikacje w architekturze opartej na REST.

Podstawowa składnia instrukcji @resource wraz z różnymi funkcjami została podana poniżej

Składnia instrukcji @resource

var resource Object = $resource(url);

Gdy już będziesz mieć pod ręką obiekt 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. query([params], [success], [error]) – Można tego użyć do wykonania standardowego wywołania GET, ale jako część odpowiedzi zwracana jest tablica.

4. usuń([params], postData, [success], [error]) – Można tego użyć do wykonania standardowego wywołania DELETE.

We wszystkich podanych poniżej funkcjach można zastosować parametr 'params' w celu podania wymaganych parametrów, które należy przekazać w adresie URL.

Na przykład,

Załóżmy, że przekazujesz wartość Topic: „Angular” jako „param” w funkcji get as
Dostawać('http://example/events' ,'{ Temat: 'Kątowy' }')
URL http://example/events?Topic=Angular zostaje wywołany jako część funkcji get.

Jak korzystać z właściwości AngularJS $resource

Aby użyć właściwości $resource, należy wykonać następujące kroki:

Krok 1) Ze strony Angular.JS należy pobrać plik „angular-resource.js” i umieścić go w aplikacji.

Krok 2) Moduł aplikacji powinien zadeklarować zależność od modułu „ngResource”, aby móc korzystać z $resource.

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 mógł wywołać niezbędną funkcjonalność udostępnianą 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

Definiując aplikację Angular tworzymy usługę korzystając z instrukcji 'DemoApp.services' gdzie DemoApp to nazwa nadana naszej aplikacji Angular.
Metoda .factory służy do tworzenia szczegółów tej nowej usługi.
„Wpis” to nazwa, którą nadajemy naszej usłudze. Może to być dowolna nazwa, którą chcesz podać.
W tej usłudze tworzymy funkcję, która będzie wywoływać API $resource
$resource('/example/Event/:1). Funkcja $resource to usługa, która służy do wywoływania punktu końcowego REST. Punkt końcowy REST jest zazwyczaj 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 na naszej głównej stronie „example” znajduje się aplikacja Event. Ta aplikacja Event jest rozwijana przy użyciu architektury opartej na REST.
Wynikiem wywołania funkcji jest obiekt klasy zasobu. Obiekt zasobu będzie teraz miał 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 (czyli get() , query() , save() , Remove(), Delete() ) w naszym kontrolerze.

W poniższym fragmencie kodu używamy jako przykładu funkcji get().

Przyjrzyjmy się kodowi, który może wykorzystać funkcję 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 /przykład /Event/:1.
Parametr:1 w adresie URL zostaje zastąpiony przez $scope.id.
Funkcja get() zwróci pusty obiekt, który zostanie automatycznie zapełniony, gdy rzeczywiste dane zostaną pobrane z serwera.
Drugi argument funkcji get() to wywołanie zwrotne, które jest wykonywane po otrzymaniu danych z serwera. Możliwym wyjściem całego kodu byłby obiekt JSON, który zwróci listę zdarzeń ujawnionych z „przykładowej” strony internetowej. Przykład tego, co można zwrócić, pokazano poniżej
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Interakcje serwera niskiego poziomu z $http

$http to kolejna usługa Angular JS, która służy do odczytu danych ze zdalnych serwerów. Najpopularniejszą formą danych odczytywanych z serwerów są dane w formacie JSON.

Załóżmy, że mamy PHP Strona ( http://example/angular/getTopics.PHP ) zwracający 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"
  }
]

Przyjrzyjmy się kodowi AngularJS za pomocą $http, którego można użyć do pobrania powyższych danych z serwera

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

W powyższym przykładzie

Do naszej funkcji kontrolera dodajemy usługę $http, abyśmy mogli skorzystać z 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 zapiszemy je w obiekcie $scope.
Możemy następnie użyć zmiennej $scope.names z kontrolera i użyć jej w naszym widoku, aby odpowiednio wyświetlić obiekty JSON.

Jak pobrać dane z SQL i MySQL Serwer korzystający z AngularJS

Angular może być również używany do pobierania danych z działającego serwera MySQL lub SQL'a.

Pomysł jest taki, że jeśli masz stronę PHP łączącą się z plikiem MySQL baza danych lub Asp.Net strona łącząca się z MS SQL bazy danych serwera, musisz upewnić się, że zarówno strona PHP, jak i strona ASP.Net renderują dane w formacie JSON.

Poniżej przedstawiono krok po kroku proces pobierania danych z SQL i MySQL Serwer korzystający z AngularJS.

Załóżmy, że mamy witrynę PHP (http://example /angular/getTopics.PHP) obsługujących dane z a MySQL lub baza danych SQL.

Krok 1) Pobieraj dane z a MySQL baza danych
Pierwszym krokiem jest upewnienie się, że strona PHP pobiera dane z pliku MySQL bazę danych i udostępnia dane w formacie JSON.

Krok 2) Uzyskaj dane JSON za pomocą usługi $http
Napisz podobny kod pokazany powyżej, aby użyć usługi $http w celu uzyskania danych JSON.

Przyjrzyjmy się kodowi AngularJS za pomocą $http, którego można użyć do pobrania powyższych danych z serwera

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Krok 3) Renderuj dane w swoim widoku za pomocą dyrektywa ng-repeat

Poniżej używamy dyrektywy ng-repeat, aby przejrzeć każdą parę klucz-wartość w obiektach JSON zwróconych przez metodę „get” usługi $http.

Dla każdego obiektu JSON wyświetlamy klucz „Nazwa”, a wartość to „Descriptjon".

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Podsumowanie

Pełna nazwa AJAX to Asynchronous JAVASCRIPT i XML.
Przyjrzeliśmy się, co to jest a SPOKOJNY Architektura to nic innego jak funkcjonalność udostępniana przez aplikacje internetowe w oparciu o standardowe polecenia HTTP GET, POST, PUT i DELETE.
Obiekt $resource jest używany z Angularem do interakcji z aplikacjami internetowymi RESTFUL na wysokim poziomie, co oznacza, że odwołujemy się tylko do funkcjonalności udostępnianych przez aplikację internetową, ale nie przejmujemy się tym, jak dana funkcjonalność jest implementowana.
Przyjrzeliśmy się także usłudze $http, której można użyć do pobrania 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 możliwości usługi $http można jej użyć do pobrania danych z pliku a MySQL lub MS SQL Server poprzez aplikację PHP. Dane można następnie wyrenderować w tabeli za pomocą dyrektywy ng-repeat.