AngularJS AJAX-opkald ved hjælp af $ resource, $ http (eksempel)

AJAX er den korte form for asynkron JavaScript og XML. AJAX blev primært designet til opdatering af dele af en webside uden at genindlæse hele siden.

Årsagen til designet af denne teknologi var at reducere antallet af rundrejser, der blev foretaget mellem klienten og serveren, og antallet af hele sideopdateringen, der plejede at finde sted, når en bruger krævede visse oplysninger.

AJAX tillod websider at blive opdateret asynkront ved at udveksle små mængder data med serveren bag kulisserne. Dette betød, at det var muligt at opdatere dele af en webside uden at genindlæse hele siden.

Mange moderne webapplikationer følger faktisk denne teknik for at opdatere siden eller hente data fra serveren.

I denne vejledning lærer du-

Interaktioner på højt niveau med servere, der bruger $ resource
Serverinteraktioner på lavt niveau med $ http
Henter data fra en server, der kører SQL og MySQL

Interaktioner på højt niveau med servere, der bruger $ resource

Angular leverer to forskellige API'er til at håndtere Ajax-anmodninger. De er

$ ressource
$ http

Vi vil se på "$ resource" ejendommen i Angular, som bruges til at interagere med servere på et højt niveau.

Når vi taler om at interagere på et højere niveau, betyder det, at vi kun vil være generede over, hvad serveren har at tilbyde med hensyn til funktionalitet og ikke om, hvad netop serveren gør i detaljer med hensyn til denne funktionalitet.

For eksempel, hvis serveren var vært for et program, der opretholder medarbejderoplysningerne for et bestemt firma, kan serveren muligvis udsætte funktionalitet for klienter som GetEmployeeDetails, SetEmployeeDetails osv.

Så på et højt niveau ved vi, hvad disse to funktioner kan gøre, og vi kan påberåbe dem ved hjælp af $ resource egenskaben. Men så ved vi ikke nøjagtigt detaljerne i "GetEmployeeDetails" og "SetEmployeeDetails-funktionerne", og hvordan det implementeres.

Ovenstående forklaring forklarer, hvad der er kendt som en REST-baseret arkitektur.

REST er kendt som Representational State Transfer, som er en arkitektur, der følges i mange moderne webbaserede systemer.
Det betyder, at du kan bruge de normale HTTP-verb i GET, POST, PUT og SLET til at arbejde med en webbaseret applikation.

Så lad os antage, at vi har en webapplikation, der opretholder en liste over begivenheder.

Hvis vi ønskede at komme til listen over alle begivenhederne,

Webapplikationen kan eksponere en URL såsom http: // eksempel / begivenheder og
Vi kan bruge verbet "GET" til at få hele listen over begivenheder, hvis applikationen følger en REST-baseret arkitektur.

Så hvis der for eksempel var en begivenhed med ID'et 1, kan vi få detaljerne om denne begivenhed via URL'en. http: // eksempel / begivenheder / 1

Hvad er $ ressourceobjektet

$ Ressourceobjektet i Angular hjælper med at arbejde med servere, der betjener applikationer i en REST-baseret arkitektur.

Den grundlæggende syntaks for @resource-sætningen sammen med de forskellige funktioner er angivet nedenfor

Syntaks for @resource statement

var resource Object = $resource(url);

Når du har resourceObject ved hånden, kan du bruge nedenstående funktioner til at foretage de nødvendige REST-opkald.

1. get ([params], [success], [error]) - Dette kan bruges til at foretage et standard GET-opkald.

2. gem ([params], postData, [success], [error]) - Dette kan bruges til at foretage et standard POST-opkald.

3. forespørgsel ([params], [success], [error]) - Dette kan bruges til at foretage et standard GET-opkald, men en matrix returneres som en del af svaret.

4. fjern ([params], postData, [success], [error]) - Dette kan bruges til at foretage standard SLET opkald.

I alle nedenstående funktioner kan parameteren 'params' bruges til at angive de krævede parametre, som skal sendes i URL'en.

For eksempel,

Antag at du overfører en værdi af Emne: 'Vinkel' som en 'param' i get-funktionen som
get (' http: // example / events ', '{Topic:' Angular '}')
URL'en http: // eksempel / begivenheder? Emne = Vinklet påberåbes som en del af get-funktionen.

Sådan bruges $ resource ejendom

For at kunne bruge $ resource egenskaben skal følgende trin følges:

Trin 1) Filen "angular-resource.js" skal downloades fra Angular.JS-webstedet og skal placeres i applikationen.

Trin 2) Applikationsmodulet skal erklære en afhængighed af "ngResource" -modulet for at kunne bruge $ -ressourcen.

I det følgende eksempel kalder vi modulet "ngResource" fra vores 'DemoApp' applikation.

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

Trin 3) Opkald til $ resource () -funktionen med dit REST-slutpunkt, som vist i det følgende eksempel.

Hvis du gør dette, vil $ resource-objektet have evnen til at påberåbe sig den nødvendige funktionalitet eksponeret af REST-slutpunkterne.

Følgende eksempel kalder slutpunkts-URL: http: // eksempel / begivenheder / 1

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

I eksemplet ovenfor gøres følgende ting

Når du definerer Angular-applikationen, oprettes en tjeneste ved hjælp af udsagnet 'DemoApp.services', hvor DemoApp er navnet på vores Angular-applikation.
Metoden .factory bruges til at oprette detaljerne i denne nye tjeneste.
'Indgang' er det navn, vi giver til vores service, som kan være ethvert navn, du vil give.
I denne tjeneste opretter vi en funktion, der vil kalde $ resource API
$ resource ('/ eksempel / begivenhed /: 1).

$ Resource-funktionen er en tjeneste, der bruges til at kalde et REST-slutpunkt. REST-slutpunktet er normalt en URL. I ovenstående funktion bruger vi URL'en (/ eksempel / hændelse /: 1) som vores REST-slutpunkt. Vores REST-slutpunkt (/ eksempel / Hændelse /: 1) angiver, at der sidder en hændelsesapplikation på vores hovedside "eksempel". Denne begivenhedsapplikation er udviklet ved hjælp af en REST-baseret arkitektur.
Resultatet af funktionsopkaldet er et objekt i ressourceklassen. Ressourceobjektet har nu de funktioner (get (), forespørgsel (), gem (), fjern (), slet ()), som kan påberåbes.

Trin 4) Vi kan nu bruge de metoder, der blev returneret i ovenstående trin (som er get (), forespørgsel (), gem (), fjern (), slet ()) i vores controller.

I nedenstående kodestykke bruger vi get () - funktionen som et eksempel

Lad os se på koden, der kan bruge get () - funktionen.

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 ovenstående trin,

Funktionen get () i ovenstående uddrag udsteder en GET-anmodning til / eksempel / Event /: 1.
Parameteren: 1 i URL'en erstattes med $ scope.id.
Funktionen get () returnerer et tomt objekt, der udfyldes automatisk, når de faktiske data kommer fra serveren.
Det andet argument for at få () er et tilbagekald, der udføres, når dataene kommer fra serveren. Den mulige output af hele koden ville være et JSON-objekt, som ville returnere listen over begivenheder, der blev eksponeret fra "eksempel" -webstedet.
Nedenfor vises et eksempel på, hvad der kan returneres
```
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
```

Serverinteraktioner på lavt niveau med $ http

$ Http er en anden Angular JS-tjeneste, der bruges til at læse data fra eksterne servere. Den mest populære form for data, der læses fra servere, er data i JSON-format.

Lad os antage, at vi har en PHP-side ( http: //eksempel/angular/getTopics.PHP ), der 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"}]

Lad os se på AngularJS-koden ved hjælp af $ http, som kan bruges til at hente ovenstående data fra serveren

I ovenstående eksempel

Vi tilføjer $ http-tjenesten til vores controller-funktion, så vi kan bruge funktionen "get" til $ http-tjenesten.
Vi bruger nu get-funktionen fra HTTP-tjenesten til at hente JSON-objekterne fra URL'en http: // eksempel /angular/getTopics.PHP
Baseret på 'respons'-objektet opretter vi en tilbagekaldsfunktion, som returnerer dataposterne, og derefter gemmer vi dem i $ scope-objektet.
Vi kan derefter bruge variablen $ scope.names fra controlleren og bruge den efter vores opfattelse til at vise JSON-objekterne i overensstemmelse hermed.

Henter data fra en server, der kører SQL og MySQL

Angular kan også bruges til at hente data fra en server, der kører MySQL eller SQL.

Ideen er, at hvis du har en PHP-side, der opretter forbindelse til en MySQL-database eller en Asp.Net-side, der opretter forbindelse til en MS SQL-serverdatabase, så skal du sikre, at både PHP- og ASP.Net-siden gengiver dataene i JSON-format.

Lad os antage, at vi har et PHP-websted ( http: // eksempel /angular/getTopics.PHP ), der serverer data fra enten en MySQL- eller SQL-database.

Trin 1) Det første trin er at sikre, at PHP-siden tager dataene fra en MySQL-database og serverer dataene i JSON-format.

Trin 2) Skriv den lignende kode vist ovenfor for at bruge $ http-tjenesten til at få JSON-data.

Lad os se på AngularJS-koden ved hjælp af $ http, som kan bruges til at hente ovenstående data fra serveren

Trin 3) Gengiv dataene i din mening ved hjælp af ng-gentagelsesdirektivet.

Nedenfor bruger vi ng-repeat-direktivet til at gennemgå hvert af nøgleværdiparene i JSON-objekterne, der returneres ved hjælp af "get" -metoden i $ http-tjenesten.

For hvert JSON-objekt viser vi nøglen, som er "Navn", og værdien er "Beskrivelse".


 {{x.Name}}  {{x.Description}}

Resumé:

Vi har kigget på, hvad en RESTFUL arkitektur er, som ikke er andet end en funktionalitet, der udsættes for webapplikationer baseret på de normale HTTP-verb i GET, POST, PUT og SLET.
$ Ressourceobjektet bruges sammen med Angular til at interagere med de RESTFUL webapplikationer på et højt niveau, hvilket betyder, at vi kun påkalder den funktion, der udsættes for webapplikationen, men ikke gider med, hvordan funktionaliteten implementeres.
Vi kiggede også på $ http-tjenesten, som kan bruges til at hente data fra en webapplikation. Dette er muligt, fordi $ http-tjenesten kan arbejde med webapplikationer på et mere detaljeret niveau.
På grund af kraften i $ http-tjenesten kan dette bruges til at hente data fra en MySQL eller MS SQL Server via en PHP-applikation. Dataene kan derefter gengives i en tabel ved hjælp af ng-repeat-direktivet.