NurgaJS AJAX kõne, kasutades ressurssi $, $ http (näide)

AJAX on asünkroonse JavaScripti ja XML-i lühivorm. AJAX oli mõeldud peamiselt veebilehtede osade värskendamiseks, ilma kogu lehte uuesti laadimata.

Selle tehnoloogia kujundamise põhjuseks oli vähendada kliendi ja serveri vaheliste edasi-tagasi reiside arvu ja kogu lehe värskenduste arvu, mis toimusid alati, kui kasutaja nõudis teatud teavet.

AJAX lubas veebilehtede asünkroonset värskendamist, vahetades kulisside taga serveriga väikeseid andmehulki. See tähendas, et veebilehe osi oli võimalik uuendada ilma kogu lehte uuesti laadimata.

Paljud tänapäevased veebirakendused järgivad seda tehnikat tegelikult lehe värskendamiseks või serverist andmete hankimiseks.

Selles õpetuses saate teada

Kõrgel tasemel suhtlemine serveritega, kasutades ressurssi $
Madal serveri suhtlus teenusega $ http
Andmete toomine serverist, kus töötab SQL ja MySQL

Kõrgel tasemel suhtlemine serveritega, kasutades ressurssi $

Angular pakub Ajaxi taotluste töötlemiseks kahte erinevat API-d. Nemad on

$ ressurss
$ http

Vaatame atribuuti "$ resource" Angularis, mida kasutatakse kõrgel tasemel serveritega suhtlemiseks.

Kui räägime suhtlemisest kõrgemal tasemel, tähendab see, et meid häirib ainult see, mida serveril on funktsionaalsuse osas pakkuda, mitte see, mida täpselt server selle funktsionaalsuse osas täpsemalt teeb.

Näiteks kui server majutas rakendust, mis hoiab teatud ettevõtte töötaja teavet, võib server paljastada funktsionaalsust klientidele, näiteks GetEmployeeDetails, SetEmployeeDetails jne.

Nii et me teame kõrgel tasemel, mida need kaks funktsiooni teha saavad, ja võime neid kasutada $ property abil. Kuid siis ei tea me täpselt funktsioonide "GetEmployeeDetails" ja "SetEmployeeDetails" üksikasju ning nende rakendamist.

Ülaltoodud selgitus selgitab REST-põhist arhitektuuri.

REST on tuntud kui representatiivse riigi ülekanne, mis on arhitektuur, mida järgitakse paljudes kaasaegsetes veebipõhistes süsteemides.
See tähendab, et veebipõhise rakendusega töötamiseks võite kasutada tavalisi HTTP-verbe GET, POST, PUT ja DELETE.

Oletame, et meil on veebirakendus, mis haldab sündmuste loendit.

Kui tahtsime jõuda kõigi sündmuste nimekirja,

Veebirakendus võib paljastada URL-i, näiteks http: // example / events ja
Kui rakendus järgib REST-põhist arhitektuuri, võime kasutada verbi "GET" kogu sündmuste loendi hankimiseks.

Nii et näiteks kui sündmus oli ID-ga 1, siis saame selle sündmuse üksikasjad URL-i kaudu. http: // näide / sündmused / 1

Mis on ressursiobjekt $

Nurga all olev ressursiobjekt $ aitab töötada serveritega, mis teenindavad rakendusi REST-põhisel arhitektuuril.

@Resource lause põhisüntaks koos erinevate funktsioonidega on toodud allpool

@Resource lause süntaks

var resource Object = $resource(url);

Kui olete ressursiObject käes, saate vajalike REST-kõnede tegemiseks kasutada järgmisi funktsioone.

1. get ([params], [success], [error]) - seda saab kasutada standardse GET-kõne tegemiseks.

2. salvesta ([params], postData, [edu], [tõrge]) - seda saab kasutada tavalise POST-kõne tegemiseks.

3. päring ([parameetrid], [õnnestumine], [viga]) - seda saab kasutada standardse GET-kõne tegemiseks, kuid massiivi tagastatakse vastuse osana.

4. eemalda ([params], postData, [õnnestumine], [tõrge]) - seda saab kasutada tavalise DELETE kõne tegemiseks.

Kõigis allpool toodud funktsioonides saab parameetrit 'params' kasutada vajalike parameetrite esitamiseks, mis tuleb URL-is edastada.

Näiteks,

Oletame, et edastate funktsiooni get funktsioonis parameetri Topic väärtuse: 'Nurga' kui 'param'
get (' http: // näide / sündmused ', '{teema:' nurgeline '}')
URL-i http: // näide / sündmused? Teema = Nurgakivi kutsutakse funktsiooni get osana.

Kuidas kasutada atribuuti $ resource

Atribuudi $ resource kasutamiseks tuleb järgida järgmisi samme:

Samm 1) Fail "angular-resource.js" tuleb alla laadida Angular.JS saidilt ja see tuleb paigutada rakendusse.

2. samm . Ressursi $ kasutamiseks peaks rakendusmoodul deklareerima sõltuvuse moodulist "ngResource".

Järgmises näites kutsume moodulit "ngResource" meie rakendusest "DemoApp".

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

Samm 3) Funktsiooni $ resource ( ) kutsumine oma REST-lõpp-punktiga, nagu on näidatud järgmises näites.

Kui teete seda, on $ resource objektil võimalus kutsuda vajalikke funktsioone, mida REST-lõpp-punktid paljastavad.

Järgmine näide kutsub lõpp-punkti URL-i: http: // example / events / 1

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

Ülaltoodud näites tehakse järgmisi asju

Nurgarakenduse määratlemisel luuakse teenus, kasutades lauset „DemoApp.services”, kus DemoApp on meie nurgarakendusele antud nimi.
Selle uue teenuse üksikasjade loomiseks kasutatakse .factory-meetodit.
'Kirje' on nimi, mille anname oma teenusele ja mis võib olla mis tahes nimi, mille soovite anda.
Selles teenuses loome funktsiooni, mis kutsub $ ressursi API-d
$ ressurss ('/ example / Event /: 1).

Funktsioon $ resource on teenus, mida kasutatakse REST-lõpp-punkti kutsumiseks. REST-lõpp-punkt on tavaliselt URL. Ülaltoodud funktsioonis kasutame REST-lõpp-punktina URL-i (/ example / Event /: 1). Meie REST-lõpp-punkt (/ näide / Sündmus /: 1) tähistab, et meie peamisel saidil on näide "Event". Selle sündmuse rakendus on välja töötatud REST-põhise arhitektuuri abil.
Funktsioonikõne tulemus on ressursiklassi objekt. Ressursiobjektil on nüüd funktsioonid (get (), query (), save (), remove (), delete ()), mida saab käivitada.

Samm 4) Nüüd saame kasutada ülaltoodud toimingus tagastatud meetodeid (milleks on get (), query (), save (), remove (), delete ()) meie kontrolleris.

Allolevas koodijupis kasutame näitena funktsiooni get ()

Vaatame koodi, mis saab funktsiooni get () kasutada.

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

Ülaltoodud etapis

Ülaltoodud koodilõigu funktsioon get () väljastab GET päringu / example / Event /: 1.
URL-i parameeter: 1 asendatakse väärtusega $ scope.id.
Funktsioon get () tagastab tühja objekti, mis täidetakse automaatselt, kui tegelikud andmed serverist tulevad.
Teine argument () saamiseks on tagasihelistamine, mis käivitatakse siis, kui andmed serverist saabuvad. Kogu koodi võimalik väljund oleks JSON-objekt, mis tagastaks "näite" veebisaidilt paljastatud sündmuste loendi.
Näide selle kohta, mida saab tagastada, on toodud allpool
```
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
```

Madal serveri suhtlus teenusega $ http

$ Http on veel üks nurgeline JS-teenus, mida kasutatakse kaugserveritest andmete lugemiseks. Serveritest loetud andmete kõige populaarsem vorm on JSON-vormingus andmed.

Oletame, et meil on PHP leht ( http: //example/angular/getTopics.PHP ), mis tagastab järgmised JSON-andmed

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

Vaatame $ http abil AngularJS koodi, mida saab kasutada ülaltoodud andmete saamiseks serverist

Ülaltoodud näites

Lisame funktsiooni Controller teenuse $ http, et saaksime kasutada teenuse $ http funktsiooni "get".
JSON-objektide saamiseks URL-ist http: // example /angular/getTopics.PHP
Objekti 'response' põhjal loome tagasihelistamisfunktsiooni, mis tagastab andmekirjed ja seejärel salvestame need objekti $ scope.
Seejärel saame kasutada kontrolleri muutujat $ scope.names ja kasutada seda meie vaates vastavalt JSON-objektide kuvamiseks.

Andmete toomine serverist, kus töötab SQL ja MySQL

Nurga abil saab andmeid hankida serverist, kus töötab MySQL või SQL.

Idee on see, et kui teil on MySQL-i andmebaasiga ühenduv PHP-leht või MS SQL-serveri andmebaasiga ühenduv Asp.Net-leht, peate tagama, et nii PHP- kui ka ASP.Net-leht renderdaks andmeid JSON-vormingus.

Oletame, et meil on PHP sait ( http: // näide /angular/getTopics.PHP ), mis teenindab andmeid kas MySQL või SQL andmebaasist.

Samm 1) Esimene samm on tagada, et PHP-leht võtab andmed MySQL-i andmebaasist ja teenindab andmeid JSON-vormingus.

Samm 2) JSON-andmete saamiseks teenuse $ http kasutamiseks kirjutage ülaltoodud sarnane kood.

Vaatame AngularJS koodi, kasutades $ http, mida saab kasutada ülaltoodud andmete saamiseks serverist

Samm 3) Esitage oma vaates olevad andmed ng-repeat käsu abil.

Allpool kasutame käsku ng-repeat, et läbida JSON-i objektide võtme-väärtuste paarid, mille tagastab teenuse $ http meetod "get".

Iga JSON-objekti puhul kuvame võtit, mis on "Nimi" ja väärtus on "Kirjeldus".


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

Kokkuvõte:

Oleme uurinud, mis on RESTFUL arhitektuur, mis pole midagi muud kui veebirakenduste paljastatud funktsioon, mis põhineb tavalistel HTTP-verbidel GET, POST, PUT ja DELETE.
Ressurssiobjekti $ kasutatakse nurkadega, et suhelda RESTFUL-i veebirakendustega kõrgel tasemel, mis tähendab, et me kasutame ainult veebirakenduse paljastatud funktsionaalsust, kuid ei häiri selle funktsionaalsuse rakendamist.
Vaatasime ka teenust $ http, mida saab kasutada veebirakendusest andmete hankimiseks. See on võimalik, kuna teenus $ http saab veebirakendustega töötada üksikasjalikumal tasemel.
Teenuse $ http võimsuse tõttu saab seda kasutada MySQL-ist või MS SQL Serverist andmete hankimiseks PHP-rakenduse kaudu. Andmeid saab seejärel tabelis renderdada, kasutades käsku ng-repeat.