AJAX je kratka oblika asinhronega JavaScript in XML. AJAX je bil v prvi vrsti zasnovan za posodabljanje delov spletne strani brez ponovnega nalaganja celotne strani.
Razlog za zasnovo te tehnologije je bil zmanjšati število povratnih potovanj med odjemalcem in strežnikom ter število osvežitev celotne strani, ki se je zgodilo, kadar je uporabnik zahteval določene informacije.
AJAX je omogočil asinhrono posodabljanje spletnih strani z izmenjavo majhnih količin podatkov s strežnikom v zakulisju. To je pomenilo, da je mogoče posodobiti dele spletne strani brez ponovnega nalaganja celotne strani.
Veliko sodobnih spletnih aplikacij dejansko sledi tej tehniki za osvežitev strani ali pridobivanje podatkov s strežnika.
V tej vadnici boste izvedeli-
- Interakcije na visoki ravni s strežniki, ki uporabljajo $ resource
- Nizka stopnja interakcije strežnika z $ http
- Pridobivanje podatkov s strežnika s sistemoma SQL in MySQL
Interakcije na visoki ravni s strežniki, ki uporabljajo $ resource
Angular ponuja dva različna API-ja za obdelavo zahtev Ajax. So
- $ vir
- $ http
Ogledali si bomo lastnost "$ resource" v programu Angular, ki se uporablja za interakcijo s strežniki na visoki ravni.
Ko govorimo o interakciji na višji ravni, to pomeni, da nas bo motilo le, kaj strežnik ponuja glede funkcionalnosti, ne pa tudi, kaj natančno strežnik naredi glede te funkcionalnosti.
Če je na primer strežnik gostil aplikacijo, ki vzdržuje podatke o zaposlenih v določenem podjetju, lahko strežnik izpostavi funkcionalnost odjemalcem, kot so GetEfficieeDetails, SetEfficieeDetails itd.
Na visoki ravni torej vemo, kaj lahko storita ti dve funkciji, in jih lahko prikličemo z uporabo lastnosti $ resource. Potem pa ne vemo natančno podrobnosti o funkcijah "GetEfficieeDetails" in "SetEfficieeDetails" ter kako se izvaja.
Zgornja razlaga pojasnjuje tako imenovano arhitekturo, ki temelji na REST.
- REST je znan kot Reprezentativni državni prenos, kar je arhitektura, ki jo uporabljajo številni sodobni spletni sistemi.
- To pomeni, da lahko za delo s spletno aplikacijo uporabite običajne glagole HTTP GET, POST, PUT in DELETE.
Predpostavimo torej, da imamo spletno aplikacijo, ki vzdržuje seznam dogodkov.
Če bi želeli priti na seznam vseh dogodkov,
- Spletna aplikacija lahko razkrije URL, kot je http: // example / events in
- Z aplikacijo GET dobimo celoten seznam dogodkov, če aplikacija sledi arhitekturi, ki temelji na REST.
Če je na primer prišlo do dogodka z ID-jem 1, potem lahko podrobnosti tega dogodka dobimo prek URL-ja. http: // primer / dogodki / 1
Kaj je objekt $ resource
Objekt $ resource v programu Angular pomaga pri delu s strežniki, ki služijo aplikacijam na arhitekturi, ki temelji na REST.
Osnovna sintaksa stavka @resource skupaj z različnimi funkcijami je podana spodaj
Sintaksa stavka @resource
var resource Object = $resource(url);
Ko imate pri roki resourceObject, lahko s spodnjimi funkcijami opravite zahtevane klice REST.
1. get ([params], [uspeh], [napaka]) - S tem lahko vzpostavite standardni klic GET.
2. shrani ([params], postData, [uspeh], [napaka]) - S tem lahko vzpostavite standardni klic POST.
3. poizvedba ([params], [uspeh], [napaka]) - S tem lahko izvedemo standardni klic GET, vendar je kot del odgovora vrnjena matrika.
4. odstrani ([params], postData, [uspeh], [napaka]) - S tem lahko vzpostavite standardni klic DELETE.
V vseh funkcijah, navedenih spodaj, lahko parameter "params" uporabite za zagotavljanje zahtevanih parametrov, ki jih je treba posredovati v URL-ju.
Na primer
- Recimo, da v funkciji get kot funkcijo prenesete vrednost teme: 'Angular' kot 'param
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL http: // example / events? Topic = Angular se prikliče kot del funkcije get.
Kako uporabljati lastnost virov $
Če želite uporabiti lastnost $ resource, morate slediti naslednjim korakom:
Korak 1) Datoteko "angular-resource.js" je treba prenesti s spletnega mesta Angular.JS in jo postaviti v aplikacijo.
Korak 2) Aplikacijski modul mora prijaviti odvisnost od modula "ngResource", da bo lahko uporabil vir $.
V naslednjem primeru prikličemo modul "ngResource" iz naše aplikacije "DemoApp".
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Korak 3) Klicanje funkcije $ resource () z vašo končno točko REST, kot je prikazano v naslednjem primeru.
Če to storite, bo objekt $ resource lahko poklical potrebno funkcionalnost, ki jo izpostavljajo končne točke REST.
Naslednji primer pokliče URL končne točke: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
V zgornjem primeru se delajo naslednje stvari
-
Pri definiranju aplikacije Angular se ustvari storitev z uporabo stavka "DemoApp.services", kjer je DemoApp ime, ki je dano naši aplikaciji Angular.
-
Za ustvarjanje podrobnosti te nove storitve se uporablja metoda .factory.
-
"Vnos" je ime, ki ga dajemo naši storitvi in je lahko katero koli ime, ki ga želite zagotoviti.
-
V tej storitvi ustvarjamo funkcijo, ki bo poklicala API $ resource
-
$ resource ('/ primer / dogodek /: 1).
Funkcija $ resource je storitev, ki se uporablja za klicanje končne točke REST. Končna točka REST je običajno URL. V zgornji funkciji kot končno točko REST uporabljamo URL (/ example / Event /: 1). Naša končna točka REST (/ primer / Dogodek /: 1) označuje, da na našem glavnem mestu "primer" sedi aplikacija za dogodek. Ta aplikacija za dogodke je razvita z uporabo arhitekture, ki temelji na REST.
-
Rezultat klica funkcije je objekt razreda vira. Objekt vira bo imel zdaj funkcije (get (), query (), save (), remove (), delete ()), ki jih je mogoče priklicati.
Korak 4) Zdaj lahko uporabimo metode, ki so bile vrnjene v zgornjem koraku (to so get (), query (), save (), remove (), delete ()) v našem krmilniku.
V spodnjem delčku kode za primer uporabljamo funkcijo get ()
Oglejmo si kodo, ki lahko uporablja funkcijo 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);});
V zgornjem koraku
- Funkcija get () v zgornjem delčku izda zahtevo GET za / example / Event /: 1.
- Parameter: 1 v URL-ju se nadomesti z $ scope.id.
- Funkcija get () bo vrnila prazen objekt, ki se samodejno zapolni, ko dejanski podatki prihajajo s strežnika.
- Drugi argument get () je povratni klic, ki se izvede, ko podatki prispejo s strežnika. Možen izhod celotne kode bi bil objekt JSON, ki bi vrnil seznam dogodkov, izpostavljenih s spletnega mesta "example".
Primer tega, kaj je mogoče vrniti, je prikazan spodaj
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Nizka stopnja interakcije strežnika z $ http
$ Http je še ena storitev Angular JS, ki se uporablja za branje podatkov z oddaljenih strežnikov. Najbolj priljubljena oblika podatkov, ki se bere s strežnikov, so podatki v obliki JSON.
Predpostavimo, da imamo PHP stran ( http: //example/angular/getTopics.PHP ), ki vrne naslednje podatke JSON
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Poglejmo kodo AngularJS s pomočjo $ http, s katero lahko zgoraj navedene podatke dobimo s strežnika
V zgornjem primeru
- Storitvi $ http dodajamo funkcijo Controller, da lahko uporabimo funkcijo "get" storitve $ http.
- Zdaj uporabljamo funkcijo get iz storitve HTTP, da dobimo predmete JSON iz URL-ja http: // example /angular/getTopics.PHP
- Na podlagi predmeta 'response' ustvarjamo funkcijo povratnega klica, ki bo vrnila zapise podatkov, nato pa jih shranimo v objekt $ scope.
- Nato lahko uporabimo spremenljivko $ scope.names iz krmilnika in jo v našem pogledu uporabimo za prikaz predmetov JSON.
Pridobivanje podatkov s strežnika s sistemoma SQL in MySQL
Angular se lahko uporablja tudi za pridobivanje podatkov s strežnika, ki izvaja MySQL ali SQL.
Ideja je, da če imate stran PHP, ki se povezuje z bazo podatkov MySQL ali stran Asp.Net, ki se povezuje z bazo podatkov strežnika MS SQL, potem morate zagotoviti, da tako PHP kot stran ASP.Net upodabljata podatke v obliki JSON.
Predpostavimo, da imamo spletno mesto PHP ( http: // example /angular/getTopics.PHP ), ki streže podatke iz baze podatkov MySQL ali SQL.
Korak 1) Prvi korak je zagotoviti, da stran PHP zajema podatke iz baze podatkov MySQL in jih streže v obliki JSON.
2. korak) Napišite zgoraj prikazano podobno kodo, če želite s storitvijo $ http dobiti podatke JSON.
Poglejmo kodo AngularJS z uporabo $ http, ki jo lahko uporabimo za pridobitev zgornjih podatkov s strežnika
Korak 3) Podatke v pogledu upodobite z uporabo direktive ng-repeat.
Spodaj uporabljamo direktivo ng-repeat za pregledovanje vsakega od parov ključ / vrednost v objektih JSON, ki jih vrne metoda "get" storitve $ http.
Za vsak objekt JSON prikažemo ključ "Ime" in vrednost "Opis".
{{x.Name}} {{x.Description}}
Povzetek:
- Ogledali smo si, kaj je RESTFUL arhitektura, ki ni nič drugega kot funkcionalnost, ki jo izpostavljajo spletne aplikacije, ki temeljijo na običajnih glagolih HTTP GET, POST, PUT in DELETE.
- Objekt $ resource se uporablja z Angular za interakcijo z RESTFUL spletnimi aplikacijami na visoki ravni, kar pomeni, da prikličemo samo funkcionalnost, ki jo izpostavlja spletna aplikacija, vendar se ne obremenjujemo s tem, kako je funkcionalnost izvedena.
- Ogledali smo si tudi storitev $ http, ki jo lahko uporabimo za pridobivanje podatkov iz spletne aplikacije. To je mogoče, ker lahko storitev $ http deluje s spletnimi aplikacijami na podrobnejši ravni.
- Zaradi moči storitve $ http jo lahko uporabimo za pridobivanje podatkov iz strežnika MySQL ali MS SQL prek aplikacije PHP. Podatke lahko nato upodobite v tabeli z uporabo direktive ng-repeat.