AngularJS AJAX

AJAX is de afkorting van Asynchronous JavaScript en XML. AJAX is primair ontworpen voor het updaten van delen van een webpagina, zonder de hele pagina opnieuw te laden.

De reden voor het ontwerpen van deze technologie was om het aantal retourvluchten tussen de client en de server te verminderen, en het aantal volledige paginaverversingen dat vroeger plaatsvond wanneer een gebruiker bepaalde informatie nodig had, te verminderen.

AJAX maakte het mogelijk om webpagina's asynchroon te updaten door kleine hoeveelheden data uit te wisselen met de server achter de schermen. Dit betekende dat het mogelijk was om delen van een webpagina te updaten, zonder de hele pagina opnieuw te laden.

Veel moderne webapplicaties volgen deze techniek feitelijk om de pagina te vernieuwen of gegevens van de server te halen.

Interacties op hoog niveau met servers die $resource gebruiken

Angular biedt twee verschillende API's om Ajax-verzoeken af te handelen. Zij zijn

$bron
$http

We zullen kijken naar de eigenschap “$resource” in Angular, die wordt gebruikt om op een hoog niveau met servers te communiceren.

Als we het hebben over interactie op een hoger niveau, betekent dit dat we ons alleen maar druk zullen maken over wat de server qua functionaliteit te bieden heeft en niet over wat de server precies in detail doet met betrekking tot deze functionaliteit.

Als de server bijvoorbeeld een applicatie host die de werknemersgegevens van een bepaald bedrijf bijhoudt, kan de server functionaliteit beschikbaar stellen aan clients zoals GetEmployeeDetails, SetEmployeeDetails, etc.

Dus op een hoog niveau weten we wat deze twee functies kunnen doen, en we kunnen ze aanroepen met de $resource-eigenschap. Maar dan weten we nog niet precies wat de details zijn van de functies "GetEmployeeDetails" en "SetEmployeeDetails", en hoe deze zijn geïmplementeerd.

De bovenstaande uitleg legt uit wat een REST-gebaseerde architectuur wordt genoemd.

REST staat bekend als Representational State Transfer, een architectuur die in veel moderne webgebaseerde systemen wordt toegepast.
Het betekent dat u de normale HTTP-werkwoorden GET, POST, PUT en DELETE kunt gebruiken om met een webgebaseerde applicatie te werken.

Laten we aannemen dat we een webapplicatie hebben die een lijst bijhoudt van Events.

Als we naar de lijst met alle evenementen willen gaan,

De webapplicatie kan een URL weergeven zoals http://example/events en
We kunnen het werkwoord “GET” gebruiken om de volledige lijst met gebeurtenissen op te halen als de applicatie een REST-gebaseerde architectuur volgt.

Als er bijvoorbeeld een gebeurtenis met ID 1 is, kunnen we de details van deze gebeurtenis opvragen via de URL. http://example/events/1

Wat is het $resource-object

Het $resource-object in Angular helpt bij het werken met servers die applicaties bedienen op een REST-gebaseerde architectuur.

De basissyntaxis van de @resource-instructie samen met de verschillende functies worden hieronder gegeven

Syntaxis van de @resource-instructie

var resource Object = $resource(url);

Zodra u het resourceObject bij de hand heeft, kunt u de onderstaande functies gebruiken om de vereiste REST-aanroepen uit te voeren.

1. get([params], [success], [error]) – Dit kan worden gebruikt om de standaard GET-aanroep te doen.

2. save([params], postData, [success], [error]) – Dit kan worden gebruikt om de standaard POST-aanroep te doen.

3. query([params], [success], [error]) – Dit kan worden gebruikt om de standaard GET-aanroep te doen, maar er wordt een array geretourneerd als onderdeel van het antwoord.

4. remove([params], postData, [success], [error]) – Dit kan worden gebruikt om de standaard DELETE-aanroep te doen.

In alle onderstaande functies kan de parameter 'params' worden gebruikt om de vereiste parameters op te geven, die in de URL moeten worden doorgegeven.

Bijvoorbeeld

Stel dat u de waarde Topic: 'Angular' als 'param' doorgeeft in de get-functie as
krijgen('http://example/events' ,'{ Onderwerp: 'Hoek' }')
De URL http://example/events?Topic=Angular wordt aangeroepen als onderdeel van de get-functie.

Hoe de AngularJS $resource-eigenschap te gebruiken

Om de eigenschap $resource te gebruiken, moeten de volgende stappen worden gevolgd:

Stap 1) Het bestand “angular-resource.js” moet worden gedownload van de Angular.JS-site en in de applicatie worden geplaatst.

Stap 2) De applicatiemodule moet een afhankelijkheid van de module “ngResource” declareren om de $resource.

In het volgende voorbeeld roepen we de module “ngResource” aan vanuit onze 'DemoApp'-applicatie.

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

Stap 3) De functie $resource() aanroepen met uw REST-eindpunt, zoals in het volgende voorbeeld.

Als u dit doet, heeft het $resource-object de mogelijkheid om de noodzakelijke functionaliteit aan te roepen die wordt weergegeven door de REST-eindpunten.

In het volgende voorbeeld wordt de eindpunt-URL aangeroepen: http://example/events/1

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

In het bovenstaande voorbeeld worden de volgende dingen gedaan

Bij het definiëren van de Angular-applicatie wordt er een dienst aangemaakt door gebruik te maken van de instructie 'DemoApp.services' waarbij DemoApp de naam is die aan onze Angular-applicatie is gegeven.
De .factory-methode wordt gebruikt om de details van deze nieuwe service te maken.
'Invoer' is de naam die we aan onze dienst geven. Dit kan elke naam zijn die u wilt opgeven.
In deze service maken we een functie die de $resource API gaat aanroepen
$resource('/example/Event/:1).De $resource-functie is een service die wordt gebruikt om een REST-eindpunt aan te roepen. Het REST-eindpunt is normaal gesproken een URL. In de bovenstaande functie gebruiken we de URL (/example /Event/:1) als ons REST-eindpunt. Ons REST-eindpunt (/example /Event/:1) geeft aan dat er een Event-applicatie op onze hoofdsite "example" staat. Deze Event-applicatie is ontwikkeld met behulp van een REST-gebaseerde architectuur.
Het resultaat van de functieaanroep is een resourceklasseobject. Het resourceobject heeft nu de functies ( get() , query() , save() , remove(), delete() ) die kunnen worden aangeroepen.

Stap 4) We kunnen nu de methoden gebruiken die in de bovenstaande stap zijn geretourneerd (dit zijn de get() , query() , save() , remove(), delete() ) in onze controller.

In het onderstaande codefragment gebruiken we de functie get() als voorbeeld

Laten we eens kijken naar de code die gebruik kan maken van de functie 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);
  });

In de bovenstaande stap,

De functie get() in het bovenstaande fragment verzendt een GET-verzoek naar / example /Event/:1.
De parameter:1 in de URL wordt vervangen door $scope.id.
De functie get() retourneert een leeg object dat automatisch wordt gevuld wanneer de daadwerkelijke gegevens van de server komen.
Het tweede argument om() te krijgen is een callback die wordt uitgevoerd wanneer de gegevens van de server binnenkomen. De mogelijke uitvoer van de volledige code zou een JSON-object zijn dat de lijst met gebeurtenissen zou retourneren die zijn weergegeven vanaf de "voorbeeld" -website. Hieronder wordt een voorbeeld weergegeven van wat kan worden geretourneerd
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Serverinteracties op laag niveau met $http

De $http is een andere Angular JS-service die wordt gebruikt om gegevens van externe servers te lezen. De meest populaire vorm van gegevens die van servers wordt gelezen, zijn gegevens in het JSON-formaat.

Laten we aannemen dat we a PHP pagina ( http://example/angular/getTopics.PHP ) die de volgende JSON-gegevens retourneert

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

Laten we eens kijken naar de AngularJS-code met behulp van $http, die kan worden gebruikt om de bovenstaande gegevens van de server te halen

<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>

In het bovenstaande voorbeeld

We voegen de $http-service toe aan onze Controller-functie, zodat we de “get”-functie van de $http-service kunnen gebruiken.
We gebruiken nu de get-functie van de HTTP-service om de JSON-objecten uit de URL te halen http://example /angular/getTopics.PHP
Op basis van het 'response'-object creëren we een callback-functie die de datarecords retourneert en vervolgens slaan we ze op in het $scope-object.
We kunnen dan de variabele $scope.names van de controller gebruiken en deze in onze weergave gebruiken om de JSON-objecten dienovereenkomstig weer te geven.

Gegevens ophalen uit SQL en MySQL Server gebruikt AngularJS

Angular kan ook worden gebruikt om gegevens op te halen van een draaiende server MySQL of SQL.

Het idee is dat als je een PHP-pagina hebt die verbinding maakt met een MySQL databank of een Asp.Net pagina die verbinding maakt met een MS SQL serverdatabase, dan moet u ervoor zorgen dat zowel de PHP- als de ASP.Net-pagina de gegevens in JSON-indeling weergeven.

Hieronder volgt een stapsgewijs proces voor het ophalen van gegevens uit SQL en MySQL Server gebruikt AngularJS.

Laten we aannemen dat we een PHP-site hebben (http://example /angular/getTopics.PHP) gegevens weergeven van a MySQL of SQL-database.

Stap 1) Neem gegevens uit a MySQL databank
De eerste stap is ervoor te zorgen dat de PHP-pagina de gegevens van een MySQL database en levert de gegevens in JSON-formaat.

Stap 2) Haal de JSON-gegevens op met behulp van de $http-service
Schrijf de vergelijkbare code hierboven om de $http-service te gebruiken om de JSON-gegevens op te halen.

Laten we eens kijken naar de AngularJS-code met behulp van $http die kan worden gebruikt om de bovenstaande gegevens van de server te krijgen

<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>

Stap 3) Geef gegevens in uw weergave weer met behulp van de ng-herhaal richtlijn

Hieronder gebruiken we de ng-repeat-richtlijn om elk van de sleutel-waardeparen in de JSON-objecten te doorlopen die worden geretourneerd door de “get” -methode van de $http-service.

Voor elk JSON-object geven we de sleutel weer die 'Naam' is en de waarde '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>

Samenvatting

De volledige vorm van AJAX is Asynchronous JavaScript en XML.
We hebben gekeken naar wat een RUSTIG architectuur is niets anders dan een functionaliteit die door webapplicaties wordt blootgelegd op basis van de normale HTTP-werkwoorden GET, POST, PUT en DELETE.
Het $resource-object wordt met Angular gebruikt om op een hoog niveau met de RESTFUL-webapplicaties te communiceren, wat betekent dat we alleen de functionaliteit aanroepen die door de webapplicatie wordt getoond, maar ons niet druk maken over de manier waarop de functionaliteit wordt geïmplementeerd.
We hebben ook gekeken naar de $http-service die kan worden gebruikt om gegevens uit een webapplicatie te halen. Dit is mogelijk omdat de dienst $http op een gedetailleerder niveau met webapplicaties kan werken.
Vanwege de kracht van de $http-service kan deze worden gebruikt om gegevens uit een MySQL of MS SQL Server via een PHP-applicatie. De gegevens kunnen vervolgens in een tabel worden weergegeven met behulp van de ng-repeat-richtlijn.