AngularJS AJAX – Ring AJAX ved å bruke $http
AngularJS AJAX
AJAX er den korte formen for Asynkron JavaSkript og XML. AJAX ble først og fremst designet for å oppdatere deler av en nettside, uten å laste hele siden på nytt.
Grunnen til å utforme denne teknologien var å redusere antall rundturer som ble foretatt mellom klienten og serveren og antallet hele sideoppdateringer som pleide å finne sted når en bruker krevde viss informasjon.
AJAX tillot nettsider å bli oppdatert asynkront ved å utveksle små mengder data med serveren bak kulissene. Dette gjorde at det var mulig å oppdatere deler av en nettside, uten å laste hele siden på nytt.
Mange moderne nettapplikasjoner følger faktisk denne teknikken for å oppdatere siden eller hente data fra serveren.
Interaksjoner på høyt nivå med servere som bruker $resource
Angular tilbyr to forskjellige API-er for å håndtere Ajax-forespørsler. Det er de
- $ressurs
- $http
Vi skal se på egenskapen "$resource" i Angular, som brukes til å samhandle med servere på et høyt nivå.
Når vi snakker om å samhandle på et høyere nivå, betyr det at vi kun vil bry oss om hva serveren har å tilby av funksjonalitet og ikke om hva serveren gjør i detalj med hensyn til denne funksjonaliteten.
For eksempel, hvis serveren var vert for en applikasjon som vedlikeholder ansattinformasjonen til et bestemt selskap, kan serveren eksponere funksjonalitet for klienter som GetEmployeeDetails, SetEmployeeDetails, etc.
Så på et høyt nivå vet vi hva disse to funksjonene kan gjøre, og vi kan påkalle dem ved å bruke $resource-egenskapen. Men da vet vi ikke nøyaktig detaljene i "GetEmployeeDetails" og "SetEmployeeDetails-funksjonene", og hvordan det implementeres.
Forklaringen ovenfor forklarer det som er kjent som en REST-basert arkitektur.
- REST er kjent som Representational State Transfer, som er en arkitektur som følges i mange moderne nettbaserte systemer.
- Det betyr at du kan bruke de vanlige HTTP-verbene GET, POST, PUT og DELETE for å jobbe med en nettbasert applikasjon.
Så la oss anta at vi har en nettapplikasjon som opprettholder en liste over Kommende hendelser.
Hvis vi ønsket å komme til listen over alle arrangementene,
- Nettapplikasjonen kan eksponere en URL som f.eks http://example/events og
- Vi kan bruke "GET"-verbet for å få hele listen over hendelser hvis applikasjonen følger en REST-basert arkitektur.
Så for eksempel, hvis det var en hendelse med en ID på 1, kan vi få detaljene om denne hendelsen via URL-en. http://example/events/1
Hva er $resource-objektet
$resource-objektet i Angular hjelper til med å jobbe med servere som betjener applikasjoner på en REST-basert arkitektur.
Den grunnleggende syntaksen til @resource-setningen sammen med de forskjellige funksjonene er gitt nedenfor
Syntaks for @ressurssetning
var resource Object = $resource(url);
Når du har resourceObject for hånden, kan du bruke funksjonene nedenfor for å foreta de nødvendige REST-anropene.
1. get([params], [suksess], [feil]) – Dette kan brukes til å foreta standard GET-kall.
2. lagre([params], postData, [suksess], [feil]) – Dette kan brukes til å foreta standard POST-kall.
3. query([params], [suksess], [feil]) – Dette kan brukes til å foreta standard GET-kall, men en matrise returneres som en del av svaret.
4. remove([params], postData, [suksess], [feil]) – Dette kan brukes til å foreta standard DELETE-anrop.
I alle funksjonene gitt nedenfor kan parameteren 'params' brukes til å angi de nødvendige parameterne, som må sendes i URL-en.
For eksempel,
- Anta at du sender verdien av Topic: 'Angular' som en 'param' i get-funksjonen som
- bli('http://example/events' ,'{ Emne: 'Angular' }')
- URL-en http://example/events?Topic=Angular blir påkalt som en del av get-funksjonen.
Hvordan bruke AngularJS $resource-egenskapen
For å bruke egenskapen $resource, må følgende trinn følges:
Trinn 1) Filen "angular-resource.js" må lastes ned fra Angular.JS-siden og må plasseres i applikasjonen.
Trinn 2) Applikasjonsmodulen bør erklære en avhengighet av "ngResource"-modulen for å bruke $ressursen.
I det følgende eksempelet kaller vi "ngResource"-modulen fra vår 'DemoApp'-applikasjon.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Trinn 3) Kalle $resource()-funksjonen med REST-endepunktet ditt, som vist i følgende eksempel.
Hvis du gjør dette, vil $resource-objektet ha muligheten til å påkalle den nødvendige funksjonaliteten eksponert av REST-endepunktene.
Følgende eksempel kaller endepunkt-URLen: http://example/events/1
angular.module('DemoApp.services').factory('Entry', function($resource) { return $resource('/example/Event/:1); // Note the full endpoint address });
I eksemplet ovenfor blir følgende ting gjort
- Når du definerer Angular-applikasjonen, opprettes en tjeneste ved å bruke setningen 'DemoApp.services' der DemoApp er navnet som er gitt til vår Angular-applikasjon.
- .factory-metoden brukes til å lage detaljene for denne nye tjenesten.
- 'Entry' er navnet vi gir til tjenesten vår, som kan være et hvilket som helst navn du vil oppgi.
- I denne tjenesten lager vi en funksjon som skal kalle $resource API
- $resource('/example/Event/:1). $resource-funksjonen er en tjeneste som brukes til å kalle et REST-endepunkt. REST-endepunktet er vanligvis en URL. I funksjonen ovenfor bruker vi URL-en (/eksempel /Event/:1) som vårt REST-endepunkt. Vårt REST-endepunkt(/eksempel /Event/:1) angir at det er en hendelsesapplikasjon på vårt hovednettsted "eksempel". Denne hendelsesapplikasjonen er utviklet ved å bruke en REST-basert arkitektur.
- Resultatet av funksjonskallet er et ressursklasseobjekt. Ressursobjektet vil nå ha funksjonene ( get() , query() , save() , remove(), delete() ) som kan påkalles.
Trinn 4) Vi kan nå bruke metodene som ble returnert i trinnet ovenfor (som er get() , query() , save() , remove(), delete() ) i kontrolleren vår.
I kodebiten nedenfor bruker vi get()-funksjonen som et eksempel
La oss se på koden som kan gjøre bruk av get()-funksjonen.
angular.module('DemoApp.controllers',[]); angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) { var obj = MyFunction.get({ 1: $scope.id }, function() { console.log(obj); });
I trinnet ovenfor,
- Get()-funksjonen i kodebiten ovenfor sender en GET-forespørsel til /eksempel /Event/:1.
- Parameteren:1 i URL-en erstattes med $scope.id.
- Funksjonen get() vil returnere et tomt objekt som fylles ut automatisk når de faktiske dataene kommer fra serveren.
- Det andre argumentet for å få() er en tilbakeringing som utføres når dataene kommer fra serveren. Den mulige utgangen av hele koden vil være et JSON-objekt som vil returnere listen over hendelser som er eksponert fra «eksempel»-nettstedet. Et eksempel på hva som kan returneres er vist nedenfor
{ { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'}, { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'}, { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'} }
Serverinteraksjoner på lavt nivå med $http
$http er en annen Angular JS-tjeneste som brukes til å lese data fra eksterne servere. Den mest populære formen for data som leses fra servere er data i JSON-format.
La oss anta at vi har en PHP side ( http://example/angular/getTopics.PHP ) som returnerer følgende JSON-data
"Topics": [ { "Name" : "Controllers", "Description" : "Controllers in action" }, { "Name" : "Models", "Description" : "Binding data using Models" }, { "Name" : "Directives", "Description" : "Using directives in Angular" } ]
La oss se på AngularJS-koden ved å bruke $http, som kan brukes til å hente dataene ovenfor fra serveren
<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>
I eksemplet ovenfor
- Vi legger til $http-tjenesten til kontrollfunksjonen vår slik at vi kan bruke "get"-funksjonen til $http-tjenesten.
- Vi bruker nå get-funksjonen fra HTTP-tjenesten for å hente JSON-objektene fra URL-en http://example /angular/getTopics.PHP
- Basert på 'response'-objektet, lager vi en tilbakeringingsfunksjon som vil returnere datapostene og deretter lagrer vi dem i $scope-objektet.
- Vi kan deretter bruke $scope.names-variabelen fra kontrolleren og bruke den i vårt syn for å vise JSON-objektene tilsvarende.
Slik henter du data fra SQL og MySQL Server som bruker AngularJS
Angular kan også brukes til å hente data fra en server som kjører MySQL eller SQL.
Tanken er at hvis du har en PHP-side som kobler til en MySQL database eller en Asp.Net side som kobles til en MS SQL serverdatabase, så må du sørge for at både PHP- og ASP.Net-siden gjengir dataene i JSON-format.
Følgende er trinn for trinn prosess for hvordan du henter data fra SQL og MySQL Server som bruker AngularJS.
La oss anta at vi har et PHP-nettsted (http://example /angular/getTopics.PHP) serverer data fra enten en MySQL eller SQL-database.
Trinn 1) Ta data fra en MySQL database
Det første trinnet er å sikre at PHP-siden tar dataene fra en MySQL database og serverer dataene i JSON-format.
Trinn 2) Få JSON-dataene ved å bruke $http-tjenesten
Skriv den lignende koden vist ovenfor for å bruke $http-tjenesten for å få JSON-dataene.
La oss se på AngularJS-koden ved å bruke $http som kan brukes til å hente dataene ovenfor fra serveren
<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>
Trinn 3) Gjengi data i visningen din ved hjelp av ng-gjenta direktiv
Nedenfor bruker vi ng-repeat-direktivet for å gå gjennom hvert av nøkkelverdi-parene i JSON-objektene som returneres av "get"-metoden til $http-tjenesten.
For hvert JSON-objekt viser vi nøkkelen som er "Navn" og verdien er "Description».
<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>
Sammendrag
- Den fullstendige formen for AJAX er Asynkron JavaScript og XML.
- Vi har sett på hva en AVSLAPPENDE arkitektur er, som ikke er annet enn en funksjonalitet som eksponeres av webapplikasjoner basert på de normale HTTP-verbene GET, POST, PUT og DELETE.
- $resource-objektet brukes sammen med Angular for å samhandle med RESTFUL-webapplikasjonene på et høyt nivå, noe som betyr at vi kun påkaller funksjonaliteten som er eksponert av webapplikasjonen, men ikke bryr oss om hvordan funksjonaliteten implementeres.
- Vi så også på $http-tjenesten som kan brukes til å hente data fra en nettapplikasjon. Dette er mulig fordi $http-tjenesten kan fungere med webapplikasjoner på et mer detaljert nivå.
- På grunn av kraften til $http-tjenesten, kan denne brukes til å hente data fra en MySQL eller MS SQL Server via en PHP-applikasjon. Dataene kan deretter gjengis i en tabell ved å bruke ng-repeat-direktivet.