AJAX je krátka forma asynchrónneho JavaScriptu a XML. AJAX bol primárne navrhnutý na aktualizáciu častí webovej stránky bez opätovného načítania celej stránky.
Dôvodom návrhu tejto technológie bolo zníženie počtu spiatočných letov, ktoré sa uskutočnili medzi klientom a serverom, a počtu aktualizácií celej stránky, ktoré sa uskutočňovali vždy, keď používateľ požadoval určité informácie.
AJAX umožnil asynchrónne aktualizovať webové stránky výmenou malého množstva údajov so serverom v zákulisí. To znamenalo, že bolo možné aktualizovať časti webovej stránky bez opätovného načítania celej stránky.
Mnoho moderných webových aplikácií skutočne používa túto techniku na obnovenie stránky alebo na získanie údajov zo servera.
V tomto návode sa naučíte
- Interakcie na vysokej úrovni so servermi, ktoré využívajú zdroj $
- Interakcie servera na nízkej úrovni s $ http
- Načítanie údajov zo servera so systémom SQL a MySQL
Interakcie na vysokej úrovni so servermi, ktoré využívajú zdroj $
Angular poskytuje dve rôzne API na spracovanie požiadaviek Ajaxu. Oni sú
- $ zdroj
- $ http
Pozrime sa na vlastnosť „$ resource“ v Angular, ktorá sa používa na interakciu so servermi na vysokej úrovni.
Keď hovoríme o interakcii na vyššej úrovni, znamená to, že nás bude trápiť iba to, čo server ponúka, pokiaľ ide o funkčnosť, a nie to, čo presne robí server v súvislosti s touto funkčnosťou.
Napríklad, ak server hostil aplikáciu, ktorá uchováva informácie o zamestnancovi určitej spoločnosti, server by mohol vystaviť funkčnosť klientom, ako sú GetEmployeeDetails, SetEmployeeDetails atď.
Takže na vysokej úrovni vieme, čo tieto dve funkcie dokážu, a môžeme ich vyvolať pomocou vlastnosti $ resource. Potom však presne nepoznáme podrobnosti o funkciách „GetEmployeeDetails“ a „SetEmployeeDetails“ a o tom, ako sa implementuje.
Vyššie uvedené vysvetlenie vysvetľuje to, čo je známe ako architektúra založená na REST.
- REST je známy ako Representational State Transfer, čo je architektúra použitá v mnohých moderných webových systémoch.
- To znamená, že pre prácu s webovou aplikáciou môžete použiť bežné HTTP slovesá GET, POST, PUT a DELETE.
Predpokladajme teda, že máme webovú aplikáciu, ktorá udržuje zoznam udalostí.
Ak by sme sa chceli dostať na zoznam všetkých udalostí,
- Webová aplikácia môže vystaviť adresu URL, napríklad http: // príklad / udalosti a
- Ak aplikácia sleduje architektúru založenú na REST, môžeme použiť sloveso „GET“ na získanie celého zoznamu udalostí.
Napríklad, ak existovala udalosť s ID 1, potom môžeme získať podrobnosti o tejto udalosti prostredníctvom adresy URL. http: // príklad / udalosti / 1
Čo je objekt $ $
Objekt $ resource v Angular pomáha pri práci so servermi, ktoré obsluhujú aplikácie na architektúre založenej na REST.
Nižšie je uvedená základná syntax príkazu @resource spolu s rôznymi funkciami
Syntax príkazu @resource
var resource Object = $resource(url);
Keď už máte po ruke resourceObject, môžete pomocou nasledujúcich funkcií uskutočniť požadované REST volania.
1. get ([params], [success], [error]) - Týmto sa dá uskutočniť štandardné GET volanie.
2. save ([params], postData, [success], [error]) - To možno použiť na uskutočnenie štandardného hovoru 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 možno použiť na uskutočnenie štandardného volania DELETE.
Vo všetkých funkciách uvedených nižšie možno parameter „params“ použiť na zabezpečenie požadovaných parametrov, ktoré je potrebné zadať do adresy URL.
Napríklad,
- Predpokladajme, že ste zadali hodnotu témy: 'Uhlové' ako 'param' vo funkcii get ako
- get (' http: // example / events ', '{Topic:' Angular '}')
- Adresa URL http: // example / events? Topic = Uhlová sa vyvolá ako súčasť funkcie get.
Ako používať vlastnosť $ resource
Ak chcete používať vlastnosť $ resource, musíte postupovať podľa nasledujúcich krokov:
Krok 1) Súbor „angular-resource.js“ je potrebné stiahnuť zo stránky Angular.JS a musí byť vložený do aplikácie.
Krok 2) Aplikačný modul by mal deklarovať závislosť na module „ngResource“, aby mohol používať zdroj $.
V nasledujúcom príklade voláme modul „ngResource“ z našej aplikácie „DemoApp“.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Krok 3) Zavolanie funkcie $ resource () pomocou koncového bodu REST, ako je uvedené v nasledujúcom príklade.
Ak to urobíte, objekt $ resource bude mať schopnosť vyvolať potrebnú funkcionalitu vystavenú koncovými bodmi REST.
Nasledujúci prí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});
V príklade vyššie sa robia nasledujúce veci
-
Pri definovaní aplikácie Angular sa služba vytvára pomocou príkazu „DemoApp.services“, kde DemoApp je názov daný našej aplikácii Angular.
-
Na vytvorenie podrobností o tejto novej službe sa používa metóda .factory.
-
„Vstup“ je názov, ktorý dávame našej službe. Môže ním byť akékoľvek meno, ktoré chcete poskytnúť.
-
V tejto službe vytvárame funkciu, ktorá bude volať $ resource API
-
$ resource ('/ example / Event /: 1).
Funkcia $ resource je služba, ktorá sa používa na volanie koncového bodu REST. Koncovým bodom REST je zvyčajne adresa URL. Vo vyššie uvedenej funkcii používame ako náš koncový bod REST adresu URL (/ example / Event /: 1). Náš koncový bod REST (/ example / Event /: 1) označuje, že na našom hlavnom „príklade“ webu sedí aplikácia Event. Táto aplikácia Event je vyvinutá pomocou architektúry založenej na REST.
-
Výsledkom volania funkcie je objekt triedy prostriedkov. Objekt prostriedku bude mať teraz funkcie (get (), query (), save (), remove (), delete ()), ktoré je možné vyvolať.
Krok 4) Teraz môžeme použiť metódy, ktoré boli vrátené v predchádzajúcom kroku (ktorými sú get (), query (), save (), remove (), delete ()) v našom ovládači.
V nasledujúcom útržku kódu uvádzame ako príklad funkciu get ()
Pozrime sa na kód, ktorý dokáže využiť funkciu 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);});
Vo vyššie uvedenom kroku
- Funkcia get () vo vyššie uvedenom úryvku vydá požiadavku GET na / example / Event /: 1.
- Parameter: 1 v adrese URL je nahradený textom $ scope.id.
- Funkcia get () vráti prázdny objekt, ktorý sa vyplní automaticky, keď skutočné údaje pochádzajú zo servera.
- Druhým argumentom get () je spätné volanie, ktoré sa vykoná pri príchode údajov zo servera. Možným výstupom celého kódu by bol objekt JSON, ktorý by vrátil zoznam udalostí vystavených z „ukážkovej“ webovej stránky.
Príklad toho, čo je možné vrátiť, je uvedený nižšie
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interakcie servera na nízkej úrovni s $ http
$ Http je ďalšia služba Angular JS, ktorá sa používa na čítanie údajov zo vzdialených serverov. Najpopulárnejšou formou údajov, ktorá sa číta zo serverov, sú údaje vo formáte JSON.
Predpokladajme, že máme stránku PHP ( http: //example/angular/getTopics.PHP ), ktorá vracia nasledujúce údaje JSON
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Pozrime sa na kód AngularJS pomocou $ http, ktorým je možné získať vyššie uvedené údaje zo servera
Vo vyššie uvedenom príklade
- Do našej funkcie radiča pridávame službu $ http, aby sme mohli používať funkciu „get“ služby $ http.
- Teraz používame funkciu get zo služby HTTP na získanie objektov JSON z adresy URL http: // example /angular/getTopics.PHP
- Na základe objektu „response“ vytvárame funkciu spätného volania, ktorá vráti dátové záznamy a následne ich ukladáme do objektu $ scope.
- Potom môžeme z ovládača použiť premennú $ scope.names a podľa nášho názoru ju použiť na príslušné zobrazenie objektov JSON.
Načítanie údajov zo servera so systémom SQL a MySQL
Uhlové možno tiež použiť na načítanie údajov zo servera so serverom MySQL alebo SQL.
Myšlienka je taká, že ak máte stránku PHP pripájajúcu sa k databáze MySQL alebo stránku Asp.Net pripájajúcu sa k databáze servera MS SQL, musíte zaistiť, aby stránka PHP aj ASP.Net poskytovala údaje vo formáte JSON.
Predpokladajme, že máme web PHP ( http: // príklad /angular/getTopics.PHP ), ktorý poskytuje dáta z databázy MySQL alebo SQL.
Krok 1) Prvým krokom je zabezpečiť, aby stránka PHP brala údaje z databázy MySQL a poskytovala ich vo formáte JSON.
Krok 2) Napíšte podobný kód uvedený vyššie, aby ste pomocou služby $ http získali údaje JSON.
Pozrime sa na kód AngularJS pomocou $ http, ktoré možno použiť na získanie vyššie uvedených údajov zo servera
Krok 3) Vykreslite údaje vo vašom zobrazení pomocou smernice ng-repeat.
Ďalej používame direktívu ng-repeat na prechádzanie každého páru kľúč - hodnota v objektoch JSON vrátených metódou „get“ služby $ http.
Pre každý objekt JSON zobrazujeme kľúč, ktorý je „Názov“ a hodnota je „Popis“.
{{x.Name}} {{x.Description}}
Zhrnutie:
- Pozreli sme sa na to, čo je to RESTFULNÁ architektúra, čo nie je nič iné ako funkčnosť vystavená webovým aplikáciám na základe bežných HTTP slovies GET, POST, PUT a DELETE.
- Objekt $ resource sa v Angular používa na interakciu s RESTFUL webovými aplikáciami na vysokej úrovni, čo znamená, že vyvolávame iba funkčnosť vystavenú webovou aplikáciou, ale netrápime sa tým, ako je implementovaná.
- Pozreli sme sa tiež na službu $ http, ktorú je možné použiť na získanie údajov z webovej aplikácie. Je to možné, pretože služba $ http môže pracovať s webovými aplikáciami na podrobnejšej úrovni.
- Vďaka sile služby $ http je možné ju použiť na získanie údajov z MySQL alebo MS SQL Servera prostredníctvom aplikácie PHP. Údaje sa potom dajú vykresliť v tabuľke pomocou smernice ng-repeat.