AJAX er den korte formen for asynkron JavaScript og XML. AJAX ble primært designet for oppdatering av deler av en webside, uten å laste hele siden på nytt.
Årsaken til utformingen av denne teknologien var å redusere antall rundturer som ble gjort mellom klienten og serveren, og antallet hele sidenoppdatering som pleide å finne sted når en bruker krevde viss informasjon.
AJAX tillot nettsider å bli oppdatert asynkront ved å utveksle små datamengder med serveren bak kulissene. Dette betydde at det var mulig å oppdatere deler av en webside, uten å laste hele siden på nytt.
Mange moderne webapplikasjoner følger faktisk denne teknikken for å oppdatere siden eller få data fra serveren.
I denne veiledningen vil du lære-
- Interaksjoner på høyt nivå med servere som bruker $ resource
- Serverinteraksjoner på lavt nivå med $ http
- Henter data fra en server som kjører SQL og MySQL
Interaksjoner på høyt nivå med servere som bruker $ resource
Angular tilbyr to forskjellige API-er for å håndtere Ajax-forespørsler. De er
- $ ressurs
- $ http
Vi vil se på "$ resource" -egenskapen i Angular, som brukes til å samhandle med servere på høyt nivå.
Når vi snakker om samhandling på et høyere nivå, betyr det at vi bare vil være plaget med hva serveren har å tilby angående funksjonalitet og ikke om hva serveren gjør i detalj med hensyn til denne funksjonaliteten.
For eksempel, hvis serveren var vert for et program som opprettholder 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åberope dem ved hjelp av $ resource property. Men da vet vi ikke nøyaktig detaljene i "GetEmployeeDetails" og "SetEmployeeDetails-funksjonene", og hvordan den implementeres.
Ovennevnte forklaring 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 til GET, POST, PUT og DELETE til å jobbe med et nettbasert program.
Så la oss anta at vi har en webapplikasjon som fører en liste over hendelser.
Hvis vi ønsket å komme til listen over alle begivenhetene,
- Nettapplikasjonen kan avsløre en URL som http: // eksempel / hendelser 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 ID 1, så kan vi få informasjon om denne hendelsen via URL. http: // eksempel / hendelser / 1
Hva er $ ressursobjektet
$ Ressursobjektet i Angular hjelper deg med å jobbe med servere som serverer applikasjoner i en REST-basert arkitektur.
Den grunnleggende syntaksen til @resource-setningen sammen med de forskjellige funksjonene er gitt nedenfor
Syntaks for @resource statement
var resource Object = $resource(url);
Når du har ressursobjektet tilgjengelig, kan du bruke funksjonene nedenfor til å foreta de nødvendige REST-samtalene.
1. få ([params], [suksess], [feil]) - Dette kan brukes til å foreta standard GET-samtale.
2. lagre ([params], postData, [suksess], [feil]) - Dette kan brukes til å foreta et standard POST-anrop.
3. spørring ([params], [suksess], [feil]) - Dette kan brukes til å foreta et standard GET-anrop, men en matris returneres som en del av svaret.
4. fjern ([params], postData, [suksess], [feil]) - Dette kan brukes til å foreta standard SLETT-samtale.
I alle funksjonene som er gitt nedenfor kan parameteren 'params' brukes til å gi de nødvendige parametrene som må sendes i URL-en.
For eksempel,
- Anta at du overfører en verdi av Emne: 'Angular' som en 'param' i get-funksjonen som
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL: en http: // eksempel / hendelser? Emne = Vinkel blir påkalt som en del av get-funksjonen.
Hvordan bruke $ resource property
For å kunne bruke ressursegenskapen $, må følgende trinn følges:
Trinn 1) Filen "angular-resource.js" må lastes ned fra Angular.JS-nettstedet og må plasseres i applikasjonen.
Trinn 2) Applikasjonsmodulen skal erklære en avhengighet av "ngResource" -modulen for å kunne bruke $ -ressursen.
I det følgende eksemplet kaller vi "ngResource" -modulen fra applikasjonen 'DemoApp'.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Trinn 3) Kaller $ 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 sluttpunkt-URL: http: // eksempel / hendelser / 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 utsagnet 'DemoApp.services' der DemoApp er navnet på Angular-applikasjonen vår.
-
.Factory-metoden brukes til å lage detaljer om denne nye tjenesten.
-
'Oppføring' er navnet vi gir til tjenesten vår, som kan være hvilket som helst navn du vil gi.
-
I denne tjenesten lager vi en funksjon som skal kalle $ resource API
-
$ resource ('/ eksempel / hendelse /: 1).
$ Resource-funksjonen er en tjeneste som brukes til å kalle et REST-endepunkt. REST-endepunktet er normalt en URL. I funksjonen ovenfor bruker vi URL-en (/ eksempel / hendelse /: 1) som vårt REST-sluttpunkt. Vårt REST-endepunkt (/ eksempel / Event /: 1) angir at det er en hendelsesapplikasjon som sitter på vårt hovedside "eksempel". Denne hendelsesapplikasjonen er utviklet ved hjelp av en REST-basert arkitektur.
-
Resultatet av funksjonsanropet er et ressursklasseobjekt. Ressursobjektet har nå funksjonene (get (), spørring (), lagre (), fjern (), slett ()) som kan påberopes.
Trinn 4) Vi kan nå bruke metodene som ble returnert i trinnet ovenfor (som er get (), spørring (), lagre (), fjern (), slett ()) i kontrolleren vår.
I kodebiten nedenfor bruker vi get () -funksjonen som et eksempel
La oss se på koden som kan bruke 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 utdraget ovenfor utsteder en GET-forespørsel til / eksempel / Event /: 1.
- Parameteren: 1 i URL-en erstattes med $ scope.id.
- Funksjonen get () returnerer 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 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: //eksempel/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 hjelp av $ http, som kan brukes til å hente ovennevnte data fra serveren
I eksemplet ovenfor
- Vi legger til $ http-tjenesten i vår Controller-funksjon, slik at vi kan bruke "get" -funksjonen til $ http-tjenesten.
- Vi bruker nå get-funksjonen fra HTTP-tjenesten for å hente JSON-objektene fra URL http: // example /angular/getTopics.PHP
- Basert på 'respons' -objektet lager vi en tilbakeringingsfunksjon som vil returnere datapostene, og deretter lagrer vi dem i $ scope-objektet.
- Vi kan deretter bruke variabelen $ scope.names fra kontrolleren og bruke den etter vårt syn for å vise JSON-objektene tilsvarende.
Henter data fra en server som kjører SQL og MySQL
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.
La oss anta at vi har et PHP-nettsted ( http: // eksempel /angular/getTopics.PHP ) som serverer data fra enten en MySQL- eller SQL-database.
Trinn 1) Det første trinnet er å sikre at PHP-siden tar dataene fra en MySQL-database og serverer dataene i JSON-format.
Trinn 2) Skriv den samme koden som vist ovenfor for å bruke $ http-tjenesten for å få JSON-data.
La oss se på AngularJS-koden ved hjelp av $ http, som kan brukes til å hente ovennevnte data fra serveren
Trinn 3) Gjengi dataene etter ditt syn ved å bruke ng-repeat-direktivet.
Nedenfor bruker vi ng-repeat-direktivet for å gå gjennom hvert av nøkkelverdiparene i JSON-objektene som returneres ved "get" -metoden til $ http-tjenesten.
For hvert JSON-objekt viser vi nøkkelen som er "Navn" og verdien er "Beskrivelse".
{{x.Name}} {{x.Description}}
Sammendrag:
- Vi har sett på hva en RESTFUL arkitektur er, som ikke er noe annet enn en funksjonalitet eksponert av webapplikasjoner basert på de vanlige HTTP-verbene GET, POST, PUT og DELETE.
- $ Ressursobjektet brukes med Angular for å samhandle med de RESTFULLE webapplikasjonene på et høyt nivå, noe som betyr at vi bare påkaller funksjonaliteten som er eksponert av webapplikasjonen, men ikke bry oss om hvordan funksjonaliteten implementeres.
- Vi så også på $ http-tjenesten som kan brukes til å hente data fra en webapplikasjon. Dette er mulig fordi $ http-tjenesten kan fungere med webapplikasjoner på et mer detaljert nivå.
- På grunn av kraften til $ http-tjenesten, kan dette brukes til å hente data fra en MySQL eller MS SQL Server via et PHP-program. Dataene kan deretter gjengis i en tabell ved hjelp av ng-repeat-direktivet.