Volání AngularJS AJAX pomocí $ resource, $ http (příklad)

AJAX je krátká forma asynchronního JavaScriptu a XML. AJAX byl primárně navržen pro aktualizaci částí webové stránky, aniž by bylo nutné znovu načíst celou stránku.

Důvodem pro konstrukci této technologie bylo snížit počet zpátečních cest, které byly provedeny mezi klientem a serverem, a počet obnovování celé stránky, ke kterému došlo, kdykoli uživatel požadoval určité informace.

AJAX umožnil asynchronní aktualizaci webových stránek výměnou malého množství dat se serverem v zákulisí. To znamenalo, že bylo možné aktualizovat části webové stránky, aniž by bylo nutné znovu načíst celou stránku.

Mnoho moderních webových aplikací ve skutečnosti používá tuto techniku pro obnovení stránky nebo získání dat ze serveru.

V tomto výukovém programu se naučíte

Interakce na vysoké úrovni se servery využívajícími zdroj $
Interakce serveru na nízké úrovni s $ http
Načítání dat ze serveru se systémem SQL a MySQL

Interakce na vysoké úrovni se servery využívajícími zdroj $

Angular poskytuje dvě různá rozhraní API pro zpracování požadavků Ajaxu. Oni jsou

$ zdroj
$ http

Podíváme se na vlastnost „$ resource“ v Angular, která se používá k interakci se servery na vysoké úrovni.

Když mluvíme o interakci na vyšší úrovni, znamená to, že se budeme obtěžovat pouze tím, co server nabízí ohledně funkčnosti, a ne tím, co přesně dělá server podrobně s ohledem na tuto funkčnost.

Například pokud server hostuje aplikaci, která udržuje informace o zaměstnancích určité společnosti, může server vystavit funkce klientům, jako jsou GetEmployeeDetails, SetEmployeeDetails atd.

Takže na vysoké úrovni víme, co tyto dvě funkce dokážou, a můžeme je vyvolat pomocí vlastnosti $ resource. Ale potom nevíme přesně podrobnosti o „GetEmployeeDetails“ a „SetEmployeeDetails funkcích“ a o tom, jak je implementován.

Výše uvedené vysvětlení vysvětluje, co je známé jako architektura založená na REST.

REST je známý jako Representational State Transfer, což je architektura, která se používá v mnoha moderních webových systémech.
To znamená, že pro práci s webovou aplikací můžete použít běžná slovesa HTTP GET, POST, PUT a DELETE.

Předpokládejme tedy, že máme webovou aplikaci, která udržuje seznam událostí.

Pokud bychom se chtěli dostat na seznam všech událostí,

Webová aplikace může vystavit adresu URL, například http: // example / events a
Můžeme použít sloveso "ZÍSKAT" k získání celého seznamu událostí, pokud aplikace sleduje architekturu založenou na REST.

Pokud například existuje událost s ID 1, můžeme podrobnosti této události získat prostřednictvím adresy URL. http: // příklad / události / 1

Co je objekt $ resource

Objekt $ resource v Angular pomáhá při práci se servery, které obsluhují aplikace na architektuře založené na REST.

Níže je uvedena základní syntaxe příkazu @resource spolu s různými funkcemi

Syntaxe příkazu @resource

var resource Object = $resource(url);

Jakmile budete mít po ruce resourceObject, můžete pomocí níže uvedených funkcí provést požadovaná volání REST.

1. get ([parametry], [úspěch], [chyba]) - Tímto lze provést standardní volání GET.

2. save ([params], postData, [success], [error]) - To lze použít ke standardnímu volání POST.

3. query ([params], [success], [error]) - This can be used to make the standard GET call, but an array is returned as part of the response.

4. remove ([params], postData, [success], [error]) - To lze použít k provedení standardního volání DELETE.

Ve všech níže uvedených funkcích lze parametr „params“ použít k poskytnutí požadovaných parametrů, které je třeba předat v adrese URL.

Například,

Předpokládejme, že ve funkci get předáte hodnotu tématu: „Úhlové“ jako „param“
get (' http: // example / events ', '{Téma:' Úhlové '}')
Adresa URL http: // příklad / události? Téma = Úhlová se vyvolá jako součást funkce get.

Jak používat vlastnost $ resource

Chcete-li použít vlastnost $ resource, musíte postupovat podle následujících kroků:

Krok 1) Soubor „angular-resource.js“ je třeba stáhnout ze stránky Angular.JS a musí být umístěn v aplikaci.

Krok 2) Aplikační modul by měl deklarovat závislost na modulu „ngResource“, aby mohl používat zdroj $.

V následujícím příkladu voláme modul „ngResource“ z naší aplikace „DemoApp“.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Krok 3) Volání funkce $ resource () pomocí koncového bodu REST, jak je znázorněno v následujícím příkladu.

Pokud to uděláte, objekt $ resource bude mít schopnost vyvolat potřebné funkce vystavené koncovými body REST.

Následující příklad volá URL koncového bodu: http: // example / events / 1

angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});

Ve výše uvedeném příkladu se provádějí následující věci

Při definování aplikace Angular se služba vytváří pomocí příkazu 'DemoApp.services', kde DemoApp je název daný naší aplikaci Angular.
Metoda .factory se používá k vytvoření podrobností o této nové službě.
„Vstup“ je název, který dáváme naší službě, kterým může být jakékoli jméno, které chcete poskytnout.
V této službě vytváříme funkci, která bude volat API prostředků $
$ resource ('/ example / Event /: 1).

Funkce $ resource je služba, která se používá k volání koncového bodu REST. Koncovým bodem REST je obvykle adresa URL. Ve výše uvedené funkci používáme jako koncový bod REST adresu URL (/ example / Event /: 1). Náš koncový bod REST (/ example / Event /: 1) označuje, že na našem hlavním příkladu webu sedí aplikace Event. Tato aplikace Událost je vyvinuta pomocí architektury založené na REST.
Výsledkem volání funkce je objekt třídy prostředků. Objekt prostředku nyní bude mít funkce (get (), query (), save (), remove (), delete ()), které lze vyvolat.

Krok 4) Nyní můžeme použít metody, které byly vráceny v předchozím kroku (které jsou get (), query (), save (), remove (), delete ()) v našem řadiči.

V níže uvedeném fragmentu kódu používáme jako příklad funkci get ()

Podívejme se na kód, který může využívat funkci 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);});

Ve výše uvedeném kroku

Funkce get () ve výše uvedeném fragmentu vydá požadavek GET na / example / Event /: 1.
Parametr: 1 v adrese URL je nahrazen $ scope.id.
Funkce get () vrátí prázdný objekt, který se vyplní automaticky, když skutečná data pocházejí ze serveru.
Druhým argumentem get () je zpětné volání, které se provede, když data dorazí ze serveru. Možným výstupem celého kódu by byl objekt JSON, který by vrátil seznam událostí vystavených z „ukázkového“ webu.
Příklad toho, co lze vrátit, je uveden níže
```
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
```

Interakce serveru na nízké úrovni s $ http

$ Http je další služba Angular JS, která se používá ke čtení dat ze vzdálených serverů. Nejoblíbenější formou dat čtených ze serverů jsou data ve formátu JSON.

Předpokládejme, že máme stránku PHP ( http: //example/angular/getTopics.PHP ), která vrací následující data JSON

"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]

Podívejme se na kód AngularJS pomocí $ http, které lze použít k získání výše uvedených dat ze serveru

Ve výše uvedeném příkladu

Do naší funkce Controller přidáváme službu $ http, abychom mohli používat funkci „get“ služby $ http.
Nyní používáme funkci get ze služby HTTP k získání objektů JSON z adresy URL http: // příklad /angular/getTopics.PHP
Na základě objektu „response“ vytváříme funkci zpětného volání, která vrátí datové záznamy a následně je ukládáme do objektu $ scope.
Potom můžeme použít proměnnou $ scope.names z řadiče a použít ji v našem pohledu k odpovídajícímu zobrazení objektů JSON.

Načítání dat ze serveru se systémem SQL a MySQL

Úhlové lze také použít k načtení dat ze serveru se spuštěným MySQL nebo SQL.

Myšlenka je, že pokud máte stránku PHP připojující se k databázi MySQL nebo stránku Asp.Net připojující se k databázi serveru MS SQL, musíte zajistit, aby stránka PHP i stránka ASP.Net vykreslovala data ve formátu JSON.

Předpokládejme, že máme web PHP ( http: // příklad /angular/getTopics.PHP ), který poskytuje data z databáze MySQL nebo SQL.

Krok 1) Prvním krokem je zajistit, aby stránka PHP převzala data z databáze MySQL a poskytla data ve formátu JSON.

Krok 2) Napište podobný kód zobrazený výše, abyste k získání dat JSON použili službu $ http.

Podívejme se na kód AngularJS pomocí $ http, které lze použít k získání výše uvedených dat ze serveru

Krok 3) Vykreslete data ve vašem zobrazení pomocí direktivy ng-repeat.

Níže používáme direktivu ng-repeat k procházení každého páru klíč – hodnota v objektech JSON vrácených metodou „get“ služby $ http.

U každého objektu JSON zobrazujeme klíč, který je „Název“ a hodnota je „Popis“.


 {{x.Name}}  {{x.Description}}

Souhrn:

Podívali jsme se na to, co je RESTFUL architektura, což není nic jiného než funkce vystavená webovými aplikacemi na základě běžných sloves HTTP GET, POST, PUT a DELETE.
Objekt $ resource se používá s Angular k interakci s RESTFUL webovými aplikacemi na vysoké úrovni, což znamená, že vyvoláme pouze funkce vystavené webovou aplikací, ale neobtěžujeme se tím, jak je funkce implementována.
Podívali jsme se také na službu $ http, kterou lze použít k získání dat z webové aplikace. To je možné, protože služba $ http může pracovat s webovými aplikacemi na podrobnější úrovni.
Díky síle služby $ http je možné ji použít k získání dat z MySQL nebo MS SQL Serveru prostřednictvím aplikace PHP. Data lze poté vykreslit v tabulce pomocí direktivy ng-repeat.