AngularJS AJAX-kutsu käyttäen $ resurssia, $ http (esimerkki)

AJAX on asynkronisen JavaScriptin ja XML: n lyhyt muoto. AJAX on suunniteltu ensisijaisesti päivittämään verkkosivun osia lataamatta koko sivua.

Syy tämän tekniikan suunnitteluun oli vähentää asiakkaan ja palvelimen välillä tehtyjen edestakaisten matkojen määrää ja koko sivun päivityksen määrää, joka tapahtui aina, kun käyttäjä tarvitsi tiettyjä tietoja.

AJAX antoi verkkosivujen päivityksen asynkronisesti vaihtamalla pieniä määriä tietoja palvelimen kanssa kulissien takana. Tämä tarkoitti sitä, että oli mahdollista päivittää verkkosivun osat lataamatta koko sivua uudelleen.

Monet nykypäivän verkkosovellukset noudattavat tätä tekniikkaa päivittäessään sivua tai haettaessa tietoja palvelimelta.

Tässä opetusohjelmassa opit-

Korkean tason vuorovaikutus palvelinten kanssa, jotka käyttävät $ resurssia
Matala palvelimen vuorovaikutus $ http: n kanssa
Haetaan tietoja palvelimelta, jossa on SQL ja MySQL

Korkean tason vuorovaikutus palvelinten kanssa, jotka käyttävät $ resurssia

Angular tarjoaa kaksi erilaista sovellusliittymää Ajax-pyyntöjen käsittelemiseksi. He ovat

resurssi $
$ http

Tarkastelemme Angular-ominaisuutta "$ resource", jota käytetään vuorovaikutuksessa palvelinten kanssa korkealla tasolla.

Kun puhumme vuorovaikutuksesta korkeammalla tasolla, se tarkoittaa, että meitä häiritsee vain se, mitä palvelimella on toiminnallisuuden suhteen, eikä se, mitä palvelin tarkalleen tekee tämän toiminnallisuuden suhteen.

Esimerkiksi, jos palvelin isännöi sovellusta, joka ylläpitää tietyn yrityksen työntekijätietoja, palvelin saattaa altistaa toiminnot asiakkaille, kuten GetEmployeeDetails, SetEmployeeDetails jne.

Joten tiedämme korkealla tasolla, mitä nämä kaksi toimintoa voivat tehdä, ja voimme kutsua ne käyttämään $ resource -ominaisuutta. Mutta sitten emme tiedä tarkasti "GetEmployeeDetails" - ja "SetEmployeeDetails-funktiot" yksityiskohtia ja miten ne toteutetaan.

Yllä oleva selitys selittää ns. REST-pohjaisen arkkitehtuurin.

REST tunnetaan nimellä Representational State Transfer, jota käytetään monissa nykyaikaisissa verkkopohjaisissa järjestelmissä.
Se tarkoittaa, että voit käyttää tavallisia HTTP-verbejä GET, POST, PUT ja DELETE työskennellä web-pohjaisen sovelluksen kanssa.

Oletetaan siis, että meillä on verkkosovellus, joka ylläpitää luetteloa tapahtumista.

Jos haluaisimme päästä kaikkien tapahtumien luetteloon,

Verkkosovellus voi paljastaa URL-osoitteen, kuten http: // esimerkki / tapahtumat ja
Voimme käyttää GET-verbiä saadaksesi koko luettelon tapahtumista, jos sovellus noudattaa REST-pohjaista arkkitehtuuria.

Joten jos esimerkiksi tapahtui tapahtuma, jonka tunnus oli 1, voimme saada tapahtuman tiedot URL-osoitteen kautta. http: // esimerkki / tapahtumat / 1

Mikä on $ resurssiobjekti

Kulman $ resurssiobjekti auttaa työskentelemään palvelimien kanssa, jotka palvelevat sovelluksia REST-pohjaisessa arkkitehtuurissa.

@Resource-käskyn perussyntaksi yhdessä eri toimintojen kanssa on annettu alla

@Resource-lauseen syntakse

var resource Object = $resource(url);

Kun sinulla on resurssiobjekti käsillä, voit käyttää alla olevia toimintoja tarvittavien REST-puhelujen soittamiseen.

1. get ([parametrit], [menestys], [virhe]) - Tätä voidaan käyttää tavallisen GET-puhelun soittamiseen.

2. tallenna ([parametrit], postData, [menestys], [virhe]) - Tätä voidaan käyttää tavallisen POST-puhelun soittamiseen.

3. kysely ([parametrit], [menestys], [virhe]) - Tätä voidaan käyttää tavallisen GET-puhelun soittamiseen, mutta taulukko palautetaan osana vastausta.

4. poista ([parametrit], postData, [menestys], [virhe]) - Tätä voidaan käyttää tavallisen POISTA-puhelun soittamiseen.

Parametreja voidaan käyttää kaikissa alla annetuissa toiminnoissa tarvittavien parametrien toimittamiseen, jotka on välitettävä URL-osoitteessa.

Esimerkiksi,

Oletetaan, että välität arvon Aihe: 'Kulma' param-parametriksi get-funktiossa
get (' http: // esimerkki / tapahtumat ', '{Aihe:' Kulma '}')
URL-osoite http: // esimerkki / tapahtumat? Aihe = Kulma käynnistetään osana get-funktiota.

$ Resource -omaisuuden käyttäminen

$ Resource -omaisuuden käyttämiseksi on noudatettava seuraavia vaiheita:

Vaihe 1) Tiedosto "angular-resource.js" on ladattava Angular.JS-sivustolta ja se on sijoitettava sovellukseen.

Vaihe 2) Sovellusmoduulin tulisi ilmoittaa riippuvuus "ngResource" -moduulista voidakseen käyttää $ -resurssia.

Seuraavassa esimerkissä kutsumme "ngResource" -moduulia DemoApp-sovelluksestamme.

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

Vaihe 3) Kutsu $ resurssi () -funktiota REST-päätepisteellesi seuraavan esimerkin mukaisesti.

Jos teet tämän, $ resource-objekti pystyy käyttämään REST-päätepisteiden altistamia tarvittavia toimintoja.

Seuraava esimerkki kutsuu päätepisteen URL-osoitetta: http: // esimerkki / tapahtumat / 1

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

Yllä olevassa esimerkissä tehdään seuraavia asioita

Kulmasovellusta määritettäessä palvelu luodaan käyttämällä lausetta 'DemoApp.services', jossa DemoApp on Angular-sovelluksellemme annettu nimi.
.Factory-menetelmää käytetään tämän uuden palvelun yksityiskohtien luomiseen.
'Entry' on nimi, jonka annamme palvelullemme ja joka voi olla mikä tahansa nimi, jonka haluat antaa.
Tässä palvelussa luomme toiminnon, joka kutsuu $ resurssin sovellusliittymää
$ resurssi ('/ esimerkki / Tapahtuma /: 1).

$ Resurssitoiminto on palvelu, jota käytetään REST-päätepisteen kutsumiseen. REST-päätepiste on yleensä URL-osoite. Yllä olevassa toiminnossa käytämme URL-osoitetta (/ esimerkki / Tapahtuma /: 1) REST-päätepisteenä. REST-päätepisteemme (/ esimerkki / Tapahtuma /: 1) tarkoittaa, että pääsivustossamme "esimerkki" istuu Tapahtumasovellus. Tämä tapahtumasovellus on kehitetty käyttämällä REST-pohjaista arkkitehtuuria.
Funktiokutsun tulos on resurssiluokan objekti. Resurssiobjektilla on nyt toiminnot (get (), kysely (), save (), remove (), delete ()), jotka voidaan kutsua.

Vaihe 4) Voimme nyt käyttää menetelmiä, jotka palautettiin edellisessä vaiheessa (jotka ovat get (), kysely (), save (), remove (), delete ()) ohjaimessamme.

Alla olevassa koodinpätkässä käytämme get () -funktiota esimerkkinä

Katsotaanpa koodia, joka voi käyttää get () -funktiota.

angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});

Yllä olevassa vaiheessa

Yllä olevan koodinpätkän get () -funktio antaa GET-pyynnön / example / Event /: 1.
Parametri: 1 URL-osoitteessa korvataan nimellä $ scope.id.
Funktio get () palauttaa tyhjän objektin, joka täytetään automaattisesti, kun todelliset tiedot tulevat palvelimelta.
Toinen argumentti get () on soittopyyntö, joka suoritetaan, kun data saapuu palvelimelta. Koko koodin mahdollinen ulostulo olisi JSON-objekti, joka palauttaisi luettelon tapahtumista, jotka ovat esillä "esimerkkisivustolta".
Alla on esimerkki palautettavasta
```
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
```

Matala palvelimen vuorovaikutus $ http: n kanssa

$ Http on toinen kulmikas JS-palvelu, jota käytetään tietojen lukemiseen etäpalvelimilta. Suosituin palvelimilta luettava datamuoto on JSON-muotoinen data.

Oletetaan, että meillä on PHP-sivu ( http: //example/angular/getTopics.PHP ), joka palauttaa seuraavat JSON-tiedot

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

Katsotaanpa AngularJS-koodia käyttämällä $ http, jota voidaan käyttää yllä olevien tietojen saamiseen palvelimelta

Yllä olevassa esimerkissä

Lisäämme $ http -palvelun Controller-toimintoomme, jotta voimme käyttää $ http -palvelun "get" -toimintoa.
Käytämme nyt get-toimintoa HTTP-palvelusta saadaksemme JSON-objektit URL-osoitteesta http: // example /angular/getTopics.PHP
'Response' -objektin perusteella luomme soittopyynnön, joka palauttaa tietueet ja myöhemmin tallennamme ne $ scope -objektiin.
Sitten voimme käyttää ohjaimen $ scope.names -muuttujaa ja käyttää sitä näkymässämme JSON-objektien näyttämiseksi vastaavasti.

Haetaan tietoja palvelimelta, jossa on SQL ja MySQL

Angularia voidaan käyttää myös tietojen hakemiseen palvelimelta, joka käyttää MySQL: ää tai SQL: ää.

Ajatuksena on, että jos sinulla on PHP-sivu, joka muodostaa yhteyden MySQL-tietokantaan, tai Asp.Net-sivu, joka yhdistää MS SQL -palvelintietokantaan, sinun on varmistettava, että sekä PHP- että ASP.Net-sivu renderöi tiedot JSON-muodossa.

Oletetaan, että meillä on PHP-sivusto ( http: // esimerkki /angular/getTopics.PHP ), joka palvelee tietoja joko MySQL- tai SQL-tietokannasta.

Vaihe 1) Ensimmäinen askel on varmistaa, että PHP-sivu ottaa tiedot MySQL-tietokannasta ja palvelee tietoja JSON-muodossa.

Vaihe 2) Kirjoita yllä oleva samanlainen koodi käyttääksesi $ http -palvelua JSON-tietojen saamiseksi.

Katsotaanpa AngularJS-koodia käyttäen $ http, jota voidaan käyttää yllä olevien tietojen saamiseen palvelimelta

Vaihe 3) Toimita näkymässäsi olevat tiedot ng-repeat -direktiivin avulla.

Alla käytämme käskyä ng-repeat käymään läpi kaikki avainarvoparit JSON-objekteissa, jotka palautetaan $ http -palvelun "get" -menetelmällä.

Jokaiselle JSON-objektille näytetään avain, joka on "Nimi" ja arvo "Kuvaus".


 {{x.Nimi}}  {{x.Description}}

Yhteenveto:

Olemme tarkastelleet mitä RESTFUL-arkkitehtuuri on, mikä on vain toiminto, jonka verkkosovellukset paljastavat normaalien HTTP-verbien GET, POST, PUT ja DELETE perusteella.
$ -Resurssiobjektia käytetään Angularin kanssa vuorovaikutuksessa RESTFUL-verkkosovellusten kanssa korkealla tasolla, mikä tarkoittaa, että käytämme vain verkkosovelluksen paljastamia toimintoja, mutta emme vaivaudu toiminnallisuuden toteuttamiseen.
Tarkastelimme myös $ http -palvelua, jota voidaan käyttää tietojen hakemiseen verkkosovelluksesta. Tämä on mahdollista, koska $ http -palvelu voi toimia verkkosovellusten kanssa tarkemmalla tasolla.
$ Http -palvelun tehon vuoksi sitä voidaan käyttää tietojen hakemiseen MySQL- tai MS SQL Server -palvelimelta PHP-sovelluksen kautta. Tiedot voidaan sitten renderöidä taulukkoon ng-repeat -direktiivin avulla.