AngularJS AJAX – tehke AJAX-kõne kasutades $http
AngularJS AJAX
AJAX on asünkroonse lühivorm JavaSkript ja XML. AJAX oli mõeldud peamiselt veebilehe osade värskendamiseks ilma kogu lehte uuesti laadimata.
Selle tehnoloogia väljatöötamise põhjuseks oli kliendi ja serveri vaheliste edasi-tagasi reiside arvu ja kogu lehe värskendamise arvu vähendamine, mis toimusid alati, kui kasutaja teatud teavet nõudis.
AJAX võimaldas veebilehti asünkroonselt värskendada, vahetades kulisside taga serveriga väikeseid andmemahtusid. See tähendas, et veebilehe osi oli võimalik uuendada ilma tervet lehte uuesti laadimata.
Paljud tänapäevased veebirakendused kasutavad seda tehnikat lehe värskendamiseks või serverist andmete hankimiseks.
Kõrgetasemeline suhtlus serveritega, kasutades $ressurssi
Angular pakub Ajaxi taotluste käsitlemiseks kahte erinevat API-d. Nad on
- $ressurss
- $http
Vaatleme Angularis atribuuti "$ ressurss", mida kasutatakse serveritega kõrgel tasemel suhtlemiseks.
Kui me räägime kõrgemal tasemel suhtlemisest, tähendab see, et meid häirib ainult see, mida serveril on funktsionaalsuse osas pakkuda, mitte see, mida server selle funktsiooniga täpsemalt teeb.
Näiteks kui server majutas rakendust, mis säilitab teatud ettevõtte töötajate teavet, võib server pakkuda selliseid funktsioone klientidele nagu GetEmployeeDetails, SetEmployeeDetails jne.
Seega teame kõrgel tasemel, mida need kaks funktsiooni suudavad, ja saame neid välja kutsuda atribuudi $resource abil. Kuid siis ei tea me täpselt funktsioonide "GetEmployeeDetails" ja "SetEmployeeDetails" üksikasju ega seda, kuidas seda rakendatakse.
Ülaltoodud selgitus selgitab seda, mida nimetatakse REST-põhiseks arhitektuuriks.
- REST on tuntud kui Representational State Transfer, mis on arhitektuur, mida järgitakse paljudes kaasaegsetes veebipõhistes süsteemides.
- See tähendab, et saate veebipõhise rakendusega töötamiseks kasutada tavalisi HTTP-verbe GET, POST, PUT ja DELETE.
Oletame, et meil on veebirakendus, mis haldab loendit Sündmused.
Kui tahame jõuda kõigi sündmuste nimekirja,
- Veebirakendus võib avaldada URL-i, näiteks http://example/events ja
- Kui rakendus järgib REST-põhist arhitektuuri, saame kogu sündmuste loendi hankimiseks kasutada verbi GET.
Näiteks kui toimus sündmus ID-ga 1, saame selle sündmuse üksikasjad URL-i kaudu. http://example/events/1
Mis on $ressurss objekt
Angulari objekt $ resource aitab töötada serveritega, mis teenindavad rakendusi REST-põhisel arhitektuuril.
Allpool on toodud @resource avalduse põhisüntaks ja erinevad funktsioonid
@resource avalduse süntaks
var resource Object = $resource(url);
Kui teil on resourceObject käepärast, saate vajalike REST-kõnede tegemiseks kasutada allolevaid funktsioone.
1. get([parameetrid], [edu], [viga]) – seda saab kasutada standardse GET-kõne tegemiseks.
2. salvesta ([parameetrid], järelandmed, [edukus], [viga]) – seda saab kasutada standardse POST-kõne tegemiseks.
3. query([parameetrid], [edu], [viga]) – seda saab kasutada standardse GET-kõne tegemiseks, kuid vastuse osana tagastatakse massiiv.
4. remove([params], postData, [success], [error]) – seda saab kasutada standardse DELETE-kõne tegemiseks.
Kõigis allpool toodud funktsioonides saab parameetrit „params” kasutada nõutavate parameetrite esitamiseks, mis tuleb URL-is edastada.
Näiteks
- Oletame, et edastate funktsiooni Topic: väärtuse 'Angular' väärtusena 'param' funktsioonis get kui
- saada('http://example/events' ,'{ Teema: 'Angular' }')
- URL http://example/events?Topic=Angular kutsutakse välja hankimisfunktsiooni osana.
Kuidas kasutada AngularJS $ ressursi atribuuti
$resource atribuudi kasutamiseks tuleb järgida järgmisi samme.
Step 1) Fail „angular-resource.js” tuleb alla laadida saidilt Angular.JS ja see tuleb paigutada rakendusse.
Step 2) Rakenduse moodul peaks deklareerima sõltuvust moodulist “ngResource”, et kasutada $ressurssi.
Järgmises näites kutsume oma rakenduse DemoApp moodulit "ngResource".
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Step 3) Funktsiooni $resource() kutsumine teie REST-otspunktiga, nagu on näidatud järgmises näites.
Kui teete seda, on objektil $resource võime kutsuda esile REST-i lõpp-punktide poolt avatud vajalikud funktsioonid.
Järgmine näide kutsub esile 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
- Angular-rakenduse defineerimisel luuakse teenus, kasutades lauset 'DemoApp.services', kus DemoApp on meie Angular-rakendusele antud nimi.
- Selle uue teenuse üksikasjade loomiseks kasutatakse .factory meetodit.
- „Sisenemine” on nimi, mille me oma teenusele anname ja mis võib olla mis tahes nimi, mida soovite anda.
- Selles teenuses loome funktsiooni, mis hakkab helistama $ resource API-le
- $resource('/example/Event/:1). Funktsioon $ressurss on teenus, mida kasutatakse REST lõpp-punkti kutsumiseks. REST-i lõpp-punkt on tavaliselt URL. Ülaltoodud funktsioonis kasutame URL-i (/example /Event/:1) oma REST-i lõpp-punktina. Meie REST-i lõpp-punkt (/example /Sündmus/:1) näitab, et meie põhisaidil "example" asub sündmuse rakendus. See sündmuse rakendus on välja töötatud REST-põhise arhitektuuri abil.
- Funktsioonikutse tulemuseks on ressursiklassi objekt. Ressursiobjektil on nüüd funktsioonid ( get() , query() , save() , remove(), delete() ), mida saab käivitada.
Step 4) Nüüd saame kasutada meetodeid, mis tagastati ülaltoodud sammus (mis on get() , query() , save() , remove(), delete() ) meie kontrolleris.
Allolevas koodilõigul kasutame näitena funktsiooni get().
Vaatame koodi, mis saab kasutada funktsiooni 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); });
Ülaltoodud etapis
- Funktsioon get() ülaltoodud koodilõigul väljastab GET-päringu aadressile / example /Event/:1.
- URL-is olev parameeter:1 asendatakse väärtusega $scope.id.
- Funktsioon get() tagastab tühja objekti, mis täidetakse automaatselt, kui serverist pärinevad tegelikud andmed.
- Teine get() argument on tagasihelistamine, mis käivitatakse andmete serverist saabumisel. Kogu koodi võimalik väljund oleks JSON-objekt, mis tagastaks näite veebisaidilt avaldatud sündmuste loendi. Allpool on näide selle kohta, mida saab tagastada
{ { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'}, { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'}, { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'} }
Madala taseme serveri interaktsioonid $http-ga
$http on veel üks Angular JS-teenus, mida kasutatakse kaugserveritest andmete lugemiseks. Kõige populaarsem andmete vorm, mida serveritest loetakse, on JSON-vormingus andmed.
Oletame, et meil on a PHP lehekülg ( 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 AngularJS koodi kasutades $http, mida saab kasutada ülaltoodud andmete serverist hankimiseks
<script> var app = angular.module('myApp', []); app.controller('AngularCtrl', function($scope, $http) { $http.get("http://example/angular/getTopics.PHP") .then(function(response) { $scope.names = response.data.records;}); }); </script>
Ülaltoodud näites
- Lisame oma kontrolleri funktsioonile $http teenuse, et saaksime kasutada $http teenuse "saada" funktsiooni.
- JSON-objektide URL-ist hankimiseks kasutame nüüd HTTP-teenuse hankimise funktsiooni http://example /angular/getTopics.PHP
- „Vastuse” objekti põhjal loome tagasihelistamisfunktsiooni, mis tagastab andmekirjed ja seejärel salvestame need objektile $scope.
- Seejärel saame kasutada kontrolleri muutujat $scope.names ja kasutada seda oma vaates JSON-objektide vastavalt kuvamiseks.
Kuidas hankida andmeid SQL-ist ja MySQL AngularJS-i kasutav server
Angulari saab kasutada ka andmete toomiseks töötavast serverist MySQL või SQL.
Idee seisneb selles, et kui teil on PHP-leht, mis ühendab a MySQL andmebaas või an Asp.Net MS-ga ühendav leht SQL serveri andmebaasi, siis peate tagama, et nii PHP kui ka ASP.Neti leht renderdaksid andmed JSON-vormingus.
Järgnev on samm-sammult SQL-ist andmete toomise protsess ja MySQL AngularJS-i kasutav server.
Oletame, et meil on PHP sait (http://example /angular/getTopics.PHP) edastab andmeid kas a MySQL või SQL andmebaasi.
Step 1) Võtke andmed aadressilt a MySQL andmebaas
Esimene samm on tagada, et PHP leht võtab andmed a MySQL andmebaasi ja teenindab andmeid JSON-vormingus.
Step 2) Hankige JSON-andmed teenuse $http abil
JSON-andmete hankimiseks $http teenuse kasutamiseks kirjutage ülaltoodud sarnane kood.
Vaatame AngularJS-koodi kasutades $ http, mida saab kasutada ülaltoodud andmete serverist hankimiseks
<script> var app = angular.module('myApp', []); app.controller('AngularCtrl', function($scope, $http) { $http.get("http://example /angular/getTopics.PHP") .then(function(response) { $scope.topics = response.data.records;}); }); </script>
Step 3) Renderdage andmed oma vaates, kasutades ng-repeat direktiiv
Allpool kasutame käsku ng-repeat, et läbida kõik JSON-objektide võtme-väärtuste paarid, mis tagastatakse teenuse $http teenuse "get" meetodil.
Iga JSON-objekti jaoks kuvame võtme, mis on "Nimi" ja väärtus on "Descriptioon”.
<div ng-app="myApp" ng-controller="AngularCtrl"> <table> <tr ng-repeat="x in topics"> <td>{{ x.Name }}</td> <td>{{ x.Description }}</td> </tr> </table> </div>
kokkuvõte
- AJAX-i täisvorm on asünkroonne JavaScript ja XML.
- Oleme vaadanud, mida a RAHKAS arhitektuur, mis pole midagi muud kui veebirakenduste funktsioon, mis põhineb tavalistel HTTP-verbidel GET, POST, PUT ja DELETE.
- Objekti $resource kasutatakse koos Angulariga, et suhelda RESTFUL-i veebirakendustega kõrgel tasemel, mis tähendab, et me kutsume välja ainult veebirakenduse eksponeeritud funktsionaalsuse, kuid ei muretse selle üle, kuidas seda funktsiooni rakendatakse.
- Vaatasime ka $http teenust, mida saab kasutada andmete hankimiseks veebirakendusest. See on võimalik, kuna teenus $http saab töötada veebirakendustega üksikasjalikumal tasemel.
- Teenuse $http võimsuse tõttu saab seda kasutada andmete hankimiseks a MySQL või MS SQL Server PHP rakenduse kaudu. Seejärel saab andmed ng-repeat direktiivi abil renderdada tabelina.