AngularJS AJAX-samtal med $ resource, $ http (exempel)

Innehållsförteckning:

Anonim

AJAX är den korta formen av asynkron JavaScript och XML. AJAX utformades främst för att uppdatera delar av en webbsida utan att ladda om hela sidan.

Anledningen till utformningen av denna teknik var att minska antalet rundresor som gjordes mellan klienten och servern och antalet uppdateringar av hela sidan som brukade äga rum när en användare krävde viss information.

AJAX tillät webbsidor att uppdateras asynkront genom att utbyta små mängder data med servern bakom kulisserna. Detta innebar att det var möjligt att uppdatera delar av en webbsida utan att ladda om hela sidan.

Många moderna webbapplikationer följer faktiskt denna teknik för att uppdatera sidan eller få data från servern.

I den här handledningen lär du dig-

  • Interaktioner på hög nivå med servrar som använder $ resource
  • Serverinteraktioner på låg nivå med $ http
  • Hämtar data från en server som kör SQL och MySQL

Interaktioner på hög nivå med servrar som använder $ resource

Angular tillhandahåller två olika API: er för att hantera Ajax-förfrågningar. Dom är

  • $ resurs
  • $ http

Vi kommer att titta på egenskapen "$ resource" i Angular, som används för att interagera med servrar på hög nivå.

När vi pratar om att interagera på en högre nivå betyder det att vi bara kommer att bry oss om vad servern har att erbjuda när det gäller funktionalitet och inte om vad exakt servern gör i detalj med avseende på denna funktionalitet.

Till exempel, om servern var värd för ett program som underhåller information om anställda för ett visst företag kan servern exponera funktionalitet för klienter som GetEmployeeDetails, SetEmployeeDetails etc.

Så på hög nivå vet vi vad dessa två funktioner kan göra, och vi kan åberopa dem med $ resource-egenskapen. Men då vet vi inte exakt detaljerna i "GetEmployeeDetails" och "SetEmployeeDetails-funktionerna", och hur den implementeras.

Ovanstående förklaring förklarar vad som kallas en REST-baserad arkitektur.

  • REST är känd som Representational State Transfer, som är en arkitektur som följs i många moderna webbaserade system.
  • Det betyder att du kan använda de vanliga HTTP-verben för GET, POST, PUT och DELETE för att arbeta med en webbaserad applikation.

Så låt oss anta att vi har en webbapplikation som håller en lista över händelser.

Om vi ​​ville komma till listan över alla händelser,

  • Webbapplikationen kan exponera en URL som http: // exempel / händelser och
  • Vi kan använda verbet "GET" för att få hela listan över händelser om applikationen följer en REST-baserad arkitektur.

Så till exempel, om det fanns en händelse med ett ID på 1, kan vi få information om den här händelsen via webbadressen. http: // exempel / händelser / 1

Vad är $ resursobjektet

Resursobjektet $ i Angular hjälper till att arbeta med servrar som serverar applikationer i en REST-baserad arkitektur.

Den grundläggande syntaxen för @resource-uttalandet tillsammans med de olika funktionerna ges nedan

Syntax för @resource statement

var resource Object = $resource(url);

När du har resourceObject till hands kan du använda följande funktioner för att ringa de önskade REST-samtalen.

1. get ([params], [success], [error]) - Detta kan användas för att ringa standard-GET-samtalet.

2. spara ([params], postData, [success], [error]) - Detta kan användas för att ringa ett standard POST-samtal.

3. fråga ([params], [success], [error]) - Detta kan användas för att göra standard-GET-samtalet, men en array returneras som en del av svaret.

4. ta bort ([params], postData, [success], [error]) - Detta kan användas för att ringa standard-DELETE-samtalet.

I alla de funktioner som ges nedan kan parametern 'params' användas för att tillhandahålla de nödvändiga parametrarna som måste skickas i URL: en.

Till exempel,

  • Antag att du skickar ett värde av Ämne: 'Vinkel' som en 'param' i get-funktionen som
  • get (' http: // example / events ', '{Topic:' Angular '}')
  • Webbadressen http: // exempel / händelser? Ämne = Vinkel åberopas som en del av get-funktionen.

Hur man använder $ resource property

För att kunna använda resursegenskapen $ måste följande steg följas:

Steg 1) Filen "angular-resource.js" måste laddas ner från Angular.JS-webbplatsen och måste placeras i applikationen.

Steg 2) Applikationsmodulen ska förklara ett beroende av "ngResource" -modulen för att kunna använda $ resursen.

I följande exempel ringer vi modulen "ngResource" från vår "DemoApp" -applikation.

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

Steg 3) Anropa $ resource () -funktionen med din REST-slutpunkt, som visas i följande exempel.

Om du gör detta kommer $ resursobjektet att kunna åberopa den nödvändiga funktionaliteten som exponeras av REST-slutpunkterna.

I följande exempel anropas slutpunkts-URL: http: // exempel / händelser / 1

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

I exemplet ovan görs följande saker

  1. När du definierar Angular-applikationen skapas en tjänst med uttalandet 'DemoApp.services' där DemoApp är namnet på vår Angular-applikation.

  2. Metoden .factory används för att skapa detaljerna för den här nya tjänsten.

  3. "Entry" är namnet vi ger till vår tjänst, vilket kan vara vilket namn du vill ge.

  4. I den här tjänsten skapar vi en funktion som kommer att kalla $ resource API

  5. $ resource ('/ exempel / Event /: 1).

    Resursfunktionen $ är en tjänst som används för att anropa en REST-slutpunkt. REST-slutpunkten är normalt en URL. I ovanstående funktion använder vi webbadressen (/ exempel / händelse /: 1) som vår REST-slutpunkt. Vår REST-slutpunkt (/ exempel / händelse /: 1) anger att det finns en händelseprogram som sitter på vårt huvudsida "exempel". Denna applikation är utvecklad med hjälp av en REST-baserad arkitektur.

  6. Resultatet av funktionsanropet är ett resursklassobjekt. Resursobjektet har nu de funktioner (get (), fråga (), save (), remove (), delete ()) som kan åberopas.

Steg 4) Vi kan nu använda metoderna som returnerades i ovanstående steg (som är get (), fråga (), save (), remove (), delete ()) i vår controller.

I kodavsnittet nedan använder vi funktionen get () som ett exempel

Låt oss titta på koden som kan använda 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 ovanstående steg,

  • Funktionen get () i utdraget ovan utfärdar en GET-begäran till / exempel / Event /: 1.
  • Parametern: 1 i URL: en ersätts med $ scope.id.
  • Funktionen get () returnerar ett tomt objekt som fylls i automatiskt när faktiska data kommer från servern.
  • Det andra argumentet för att få () är en återuppringning som körs när data kommer från servern. Den möjliga utmatningen av hela koden skulle vara ett JSON-objekt som skulle returnera listan över händelser som exponerats från "exempel" -webbplatsen.

    Ett exempel på vad som kan returneras visas nedan

    {{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}

Serverinteraktioner på låg nivå med $ http

$ Http är en annan Angular JS-tjänst som används för att läsa data från fjärrservrar. Den mest populära formen av data som läses från servrar är data i JSON-format.

Låt oss anta att vi har en PHP-sida ( http: //exempel/angular/getTopics.PHP ) som returnerar följande JSON-data

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

Låt oss titta på AngularJS-koden med $ http, som kan användas för att hämta ovanstående data från servern

I exemplet ovan

  1. Vi lägger till $ http-tjänsten till vår Controller-funktion så att vi kan använda "get" -funktionen för $ http-tjänsten.
  2. Vi använder nu get-funktionen från HTTP-tjänsten för att hämta JSON-objekten från URL: n http: // exempel /angular/getTopics.PHP
  3. Baserat på "svar" -objektet skapar vi en återuppringningsfunktion som returnerar dataposterna och sedan lagrar vi dem i $ scope-objektet.
  4. Vi kan sedan använda variabeln $ scope.names från styrenheten och använda den enligt vår syn för att visa JSON-objekten därefter.

Hämtar data från en server som kör SQL och MySQL

Angular kan också användas för att hämta data från en server som kör MySQL eller SQL.

Tanken är att om du har en PHP-sida som ansluter till en MySQL-databas eller en Asp.Net-sida som ansluter till en MS SQL-serverdatabas, måste du se till att både PHP- och ASP.Net-sidan gör data i JSON-format.

Låt oss anta att vi har en PHP-webbplats ( http: // exempel /angular/getTopics.PHP ) som serverar data från antingen en MySQL- eller SQL-databas.

Steg 1) Det första steget är att se till att PHP-sidan tar data från en MySQL-databas och serverar data i JSON-format.

Steg 2) Skriv samma kod som visas ovan för att använda $ http-tjänsten för att få JSON-data.

Låt oss titta på AngularJS-koden med hjälp av $ http som kan användas för att få ovanstående data från servern

Steg 3) Rendera data i din vy med ng-repeat-direktivet.

Nedan använder vi ng-repeat-direktivet för att gå igenom vart och ett av nyckel-värdeparen i JSON-objekten som returneras med "get" -metoden för $ http-tjänsten.

För varje JSON-objekt visar vi nyckeln som är "Namn" och värdet är "Beskrivning".


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

Sammanfattning:

  • Vi har tittat på vad en RESTFUL arkitektur är, vilket bara är en funktion som exponeras av webbapplikationer baserat på de vanliga HTTP-verben GET, POST, PUT och DELETE.
  • Resursobjektet $ används med Angular för att interagera med RESTFUL webbapplikationer på en hög nivå vilket innebär att vi bara åberopar den funktion som exponeras av webbapplikationen men inte bry oss om hur funktionaliteten implementeras.
  • Vi tittade också på tjänsten $ http som kan användas för att få data från en webbapplikation. Detta är möjligt eftersom tjänsten $ http kan fungera med webbapplikationer på en mer detaljerad nivå.
  • På grund av kraften i $ http-tjänsten kan den användas för att hämta data från en MySQL eller MS SQL Server via en PHP-applikation. Data kan sedan återges i en tabell med ng-repeat-direktivet.