AJAX je kratki oblik asinkronog JavaScript-a i XML-a. AJAX je prvenstveno dizajniran za ažuriranje dijelova web stranice, bez ponovnog učitavanja cijele stranice.
Razlog za dizajniranje ove tehnologije bio je smanjiti broj povratnih putovanja između klijenta i poslužitelja i broj osvježavanja cijele stranice koje su se odvijale kad god je korisnik tražio određene informacije.
AJAX je omogućio asinhrono ažuriranje web stranica razmjenom malih količina podataka s poslužiteljem iza kulisa. To je značilo da je moguće ažurirati dijelove web stranice, bez ponovnog učitavanja cijele stranice.
Mnoge moderne web aplikacije zapravo slijede ovu tehniku za osvježavanje stranice ili dobivanje podataka s poslužitelja.
U ovom vodiču naučit ćete-
- Interakcije na visokoj razini sa poslužiteljima pomoću $ resursa
- Interakcije poslužitelja na niskoj razini s $ http
- Dohvaćanje podataka s poslužitelja koji izvodi SQL i MySQL
Interakcije na visokoj razini sa poslužiteljima pomoću $ resursa
Angular nudi dva različita API-ja za obradu Ajax zahtjeva. Oni su
- $ resurs
- $ http
Pogledat ćemo svojstvo "$ resource" u Angulu, koje se koristi za interakciju s poslužiteljima na visokoj razini.
Kada govorimo o interakciji na višoj razini, to znači da će nas smetati samo ono što poslužitelj nudi u vezi s funkcionalnošću, a ne i što točno poslužitelj detaljno radi u vezi s tom funkcionalnošću.
Na primjer, ako je poslužitelj bio domaćin aplikaciji koja održava podatke o zaposlenicima određene tvrtke, poslužitelj bi klijentima mogao izložiti funkcionalnost kao što su GetEfficieeDetails, SetEfficieeDetails itd.
Dakle, na visokoj razini znamo što mogu ove dvije funkcije i možemo ih pozvati pomoću svojstva $ resource. Ali tada ne znamo točno detalje o "GetEfficieeDetails" i "SetEfficieeDetails funkcije", te kako se to primjenjuje.
Gornje objašnjenje objašnjava ono što je poznato kao REST-temeljena arhitektura.
- REST je poznat kao Reprezentativni državni prijenos, što je arhitektura koja se slijedi u mnogim modernim web sustavima.
- To znači da za rad s web-aplikacijom možete koristiti uobičajene HTTP glagole GET, POST, PUT i DELETE.
Pretpostavimo, dakle, da imamo web aplikaciju koja održava popis događaja.
Ako bismo željeli doći do popisa svih događaja,
- Web aplikacija može otkriti URL poput http: // example / events i
- Možemo upotrijebiti glagol "GET" za dobivanje cijelog popisa događaja ako aplikacija slijedi REST arhitekturu.
Tako, na primjer, ako je bio Događaj s ID-om 1, tada možemo dobiti detalje o ovom događaju putem URL-a. http: // primjer / događaji / 1
Što je $ resource objekt
Objekt $ resource u Angulu pomaže u radu s poslužiteljima koji poslužuju aplikacije na REST arhitekturi.
Osnovna sintaksa izraza @resource zajedno s raznim funkcijama dane su u nastavku
Sintaksa izraza @resource
var resource Object = $resource(url);
Jednom kad vam je pri ruci resourceObject, možete koristiti dolje navedene funkcije za upućivanje potrebnih REST poziva.
1. get ([params], [uspjeh], [pogreška]) - To se može koristiti za upućivanje standardnog GET poziva.
2. spremi ([params], postData, [uspjeh], [pogreška]) - To se može koristiti za upućivanje standardnog POST poziva.
3. upit ([params], [uspjeh], [pogreška]) - To se može koristiti za upućivanje standardnog GET poziva, ali niz se vraća kao dio odgovora.
4. ukloni ([params], postData, [uspjeh], [pogreška]) - To se može koristiti za upućivanje standardnog poziva DELETE.
U svim funkcijama navedenim u nastavku parametar 'params' može se koristiti za pružanje potrebnih parametara koje treba proslijediti u URL-u.
Na primjer,
- Pretpostavimo da vrijednost Topic: 'Angular' proslijedite kao 'param' u funkciji get kao
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL http: // primjer / događaji? Topic = Angular se poziva kao dio funkcije get.
Kako se koristi svojstvo resursa $
Da biste koristili svojstvo $ resource, potrebno je slijediti sljedeće korake:
Korak 1) Datoteku "angular-resource.js" potrebno je preuzeti s mjesta Angular.JS i mora se smjestiti u aplikaciju.
Korak 2) Aplikacijski modul trebao bi proglasiti ovisnost o modulu "ngResource" kako bi koristio $ resurs.
U sljedećem primjeru pozivamo modul "ngResource" iz naše aplikacije "DemoApp".
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Korak 3) Pozivanje funkcije $ resource () s vašom krajnjom točkom REST, kao što je prikazano u sljedećem primjeru.
Ako to učinite, objekt $ resource imat će mogućnost pozivanja potrebne funkcionalnosti izložene REST krajnjim točkama.
Sljedeći primjer poziva URL krajnje točke: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
U gornjem primjeru rade se sljedeće stvari
-
Kada se definira Angular aplikacija, usluga se izrađuje pomoću izraza 'DemoApp.services' gdje je DemoApp naziv koji je dan našoj Angular aplikaciji.
-
Metoda .factory koristi se za stvaranje detalja ove nove usluge.
-
'Entry' je ime koje dajemo našoj usluzi i može biti bilo koje ime koje želite pružiti.
-
U ovoj usluzi stvaramo funkciju koja će pozvati API API-ja $
-
$ resurs ('/ primjer / Događaj /: 1).
Funkcija $ resource usluga je koja se koristi za pozivanje REST krajnje točke. REST krajnja točka obično je URL. U gornjoj funkciji koristimo URL (/ primjer / Događaj /: 1) kao našu REST krajnju točku. Naša krajnja točka REST (/ primjer / Događaj /: 1) označava da na našem glavnom mjestu "primjer" postoji aplikacija za događaje. Ovaj program događaja razvijen je korištenjem arhitekture zasnovane na REST-u.
-
Rezultat poziva funkcije je objekt klase resursa. Objekt resursa sada će imati funkcije (get (), query (), save (), remove (), delete ()) koje se mogu pozvati.
Korak 4) Sada možemo koristiti metode vraćene u gornjem koraku (a to su get (), query (), save (), remove (), delete ()) u našem kontroloru.
U donjem isječku koda koristimo funkciju get () kao primjer
Pogledajmo kod koji može koristiti funkciju 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);});
U gornjem koraku,
- Funkcija get () u gornjem isječku izdaje GET zahtjev za / example / Event /: 1.
- Parametar: 1 u URL-u zamjenjuje se s $ scope.id.
- Funkcija get () vratit će prazan objekt koji se automatski popunjava kada stvarni podaci dolaze s poslužitelja.
- Drugi argument za get () je povratni poziv koji se izvršava kad podaci stignu s poslužitelja. Mogući izlaz cijelog koda bio bi JSON objekt koji bi vratio popis događaja izloženih s web stranice "example".
Primjer onoga što se može vratiti prikazan je u nastavku
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interakcije poslužitelja na niskoj razini s $ http
$ Http je još jedna Angular JS usluga koja se koristi za čitanje podataka s udaljenih poslužitelja. Najpopularniji oblik podataka koji se čita s poslužitelja su podaci u JSON formatu.
Pretpostavimo da imamo PHP stranicu ( http: //example/angular/getTopics.PHP ) koja vraća sljedeće JSON podatke
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Pogledajmo AngularJS kod pomoću $ http, koji se može koristiti za dobivanje gore navedenih podataka s poslužitelja
U gornjem primjeru
- Našoj funkciji Controller dodajemo uslugu $ http kako bismo mogli koristiti funkciju "get" usluge $ http.
- Sada koristimo funkciju get iz HTTP usluge za dobivanje JSON objekata s URL-a http: // example /angular/getTopics.PHP
- Na temelju objekta 'response', kreiramo funkciju povratnog poziva koja će vratiti zapise podataka, a zatim ih pohranjujemo u objekt $ scope.
- Tada možemo upotrijebiti varijablu $ scope.names iz kontrolera i koristiti je u našem prikazu za prikaz JSON objekata u skladu s tim.
Dohvaćanje podataka s poslužitelja koji izvodi SQL i MySQL
Angular se također može koristiti za dohvaćanje podataka s poslužitelja koji izvodi MySQL ili SQL.
Ideja je da ako imate PHP stranicu koja se povezuje s MySQL bazom podataka ili Asp.Net stranicu koja se povezuje s bazom podataka MS SQL poslužitelja, tada morate osigurati da i PHP i ASP.Net stranica generiraju podatke u JSON formatu.
Pretpostavimo da imamo PHP web mjesto ( http: // example /angular/getTopics.PHP ) koje opslužuje podatke iz MySQL ili SQL baze podataka.
Korak 1) Prvi korak je osigurati da PHP stranica uzima podatke iz MySQL baze podataka i služi podacima u JSON formatu.
Korak 2) Napišite slični kod prikazan gore kako biste koristili $ http uslugu za dobivanje JSON podataka.
Pogledajmo AngularJS kod pomoću $ http koji se može koristiti za dobivanje gore navedenih podataka s poslužitelja
Korak 3) Prikažite podatke u svom prikazu pomoću direktive ng-repeat.
Ispod koristimo ng-repeat direktivu za prolazak kroz svaki od parova ključ / vrijednost u JSON objektima vraćenim metodom "get" usluge $ http.
Za svaki JSON objekt prikazujemo ključ koji je "Ime", a vrijednost "Opis".
{{x.Name}} {{x.Description}}
Sažetak:
- Pogledali smo što je RESTFUL arhitektura, koja nije ništa drugo doli funkcionalnost izložena web aplikacijama na temelju uobičajenih HTTP glagola GET, POST, PUT i DELETE.
- Objekt $ resource koristi se s Angulom za interakciju s RESTFUL web aplikacijama na visokoj razini, što znači da se pozivamo samo na funkcionalnost koju izlaže web aplikacija, ali ne brinemo kako je funkcionalnost implementirana.
- Također smo pogledali uslugu $ http koja se može koristiti za dobivanje podataka iz web aplikacije. To je moguće jer usluga $ http može raditi s web aplikacijama na detaljnijoj razini.
- Zbog snage $ http usluge, ovo se može koristiti za dobivanje podataka s MySQL ili MS SQL poslužitelja putem PHP aplikacije. Podaci se tada mogu prikazati u tablici pomoću direktive ng-repeat.
