AJAX is de korte vorm van asynchroon JavaScript en XML. AJAX is voornamelijk ontworpen om delen van een webpagina bij te werken, 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 paginavernieuwingen die plaatsvonden wanneer een gebruiker bepaalde informatie nodig had, te verminderen.
AJAX stond toe dat webpagina's asynchroon werden bijgewerkt door kleine hoeveelheden gegevens uit te wisselen met de server achter de schermen. Dit betekende dat het mogelijk was om delen van een webpagina bij te werken, zonder de hele pagina opnieuw te laden.
Veel moderne webapplicaties volgen deze techniek eigenlijk om de pagina te vernieuwen of gegevens van de server te krijgen.
In deze tutorial leer je-
- Interacties op hoog niveau met servers die $ resource gebruiken
- Serverinteracties op laag niveau met $ http
- Gegevens ophalen van een server met SQL en MySQL
Interacties op hoog niveau met servers die $ resource gebruiken
Angular biedt twee verschillende API's om Ajax-verzoeken af te handelen. Zij zijn
- $ resource
- $ http
We zullen kijken naar de eigenschap "$ resource" in Angular, die wordt gebruikt voor interactie met servers op een hoog niveau.
Als we het hebben over interactie op een hoger niveau, betekent dit dat we ons alleen zorgen maken over wat de server te bieden heeft aan functionaliteit en niet over wat de server precies in detail doet met betrekking tot deze functionaliteit.
Als de server bijvoorbeeld een applicatie host die de werknemersinformatie van een bepaald bedrijf bijhoudt, kan de server functionaliteit aan klanten blootstellen, zoals GetEmployeeDetails, SetEmployeeDetails, enz.
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 niet precies de details van de "GetEmployeeDetails" en de "SetEmployeeDetails-functies", en hoe deze wordt geïmplementeerd.
De bovenstaande uitleg legt uit wat bekend staat als een op REST gebaseerde architectuur.
- REST staat bekend als Representational State Transfer, een architectuur die wordt gevolgd in veel moderne webgebaseerde systemen.
- Het betekent dat u de normale HTTP-werkwoorden van GET, POST, PUT en DELETE kunt gebruiken om met een webgebaseerde applicatie te werken.
Laten we dus aannemen dat we een webtoepassing hebben die een lijst met gebeurtenissen bijhoudt.
Als we de lijst met alle evenementen willen zien,
- De webtoepassing 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 toepassing een op REST gebaseerde architectuur volgt.
Dus als er bijvoorbeeld een evenement was met een ID van 1, dan kunnen we de details van dit evenement via de URL opvragen. http: // voorbeeld / evenementen / 1
Wat is het $ resource-object
Het $ resource-object in Angular helpt bij het werken met servers die applicaties bedienen op een op REST gebaseerde architectuur.
De basissyntaxis van de @resource-instructie samen met de verschillende functies wordt hieronder gegeven
Syntaxis van @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 te doen.
1. get ([params], [succes], [fout]) - Dit kan worden gebruikt om de standaard GET-oproep te doen.
2. save ([params], postData, [success], [error]) - Dit kan worden gebruikt om de standaard POST-oproep 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 maken.
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 een waarde van Topic: 'Angular' als een 'param' doorgeeft in de get-functie als
- get (' http: // example / events ', '{Topic:' Angular '}')
- De URL http: // example / events? Topic = Angular wordt aangeroepen als onderdeel van de functie get.
Hoe $ 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 "ngResource" -module declareren om de $ resource te kunnen gebruiken.
In het volgende voorbeeld noemen we de "ngResource" -module vanuit onze 'DemoApp'-applicatie.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Stap 3) De functie $ resource ( ) aanroepen met uw REST-eindpunt, zoals weergegeven 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 een service gemaakt met behulp van de verklaring 'DemoApp.services', waarbij DemoApp de naam is die aan onze Angular-applicatie wordt gegeven.
-
De .factory-methode wordt gebruikt om de details van deze nieuwe service te creëren.
-
'Entry' is de naam die we aan onze service geven, die elke gewenste naam kan zijn.
-
In deze service maken we een functie die de $ resource API gaat aanroepen
-
$ resource ('/ voorbeeld / Evenement /: 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 op REST gebaseerde architectuur.
-
Het resultaat van de functieaanroep is een resourceklasseobject. Het resource-object 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 stuurt 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 feitelijke gegevens van de server komen.
- Het tweede argument voor get () is een callback die wordt uitgevoerd wanneer de gegevens van de server binnenkomen. De mogelijke uitvoer van de volledige code is een JSON-object dat de lijst met gebeurtenissen retourneert die zijn weergegeven vanaf de "voorbeeld" -website.
Hieronder ziet u een voorbeeld van wat u kunt retourneren
{{ '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 een PHP-pagina hebben ( 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 $ http, die kan worden gebruikt om de bovenstaande gegevens van de server te krijgen
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 functie get van de HTTP-service om de JSON-objecten op te halen van de URL http: // example /angular/getTopics.PHP
- Op basis van het 'response'-object maken we een callback-functie die de gegevensrecords 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 visie gebruiken om de JSON-objecten dienovereenkomstig weer te geven.
Gegevens ophalen van een server met SQL en MySQL
Angular kan ook worden gebruikt om gegevens op te halen van een server met MySQL of SQL.
Het idee is dat als je een PHP-pagina hebt die verbinding maakt met een MySQL-database of een Asp.Net-pagina die verbinding maakt met een MS SQL-serverdatabase, je ervoor moet zorgen dat zowel de PHP- als de ASP.Net-pagina de gegevens in JSON-indeling weergeeft.
Laten we aannemen dat we een PHP-site hebben ( http: // example /angular/getTopics.PHP ) die gegevens uit een MySQL- of SQL-database levert .
Stap 1) De eerste stap is ervoor te zorgen dat de PHP-pagina de gegevens uit een MySQL-database haalt en de gegevens in JSON-formaat aanbiedt.
Stap 2) Schrijf de vergelijkbare code die hierboven wordt weergegeven om de $ http-service te gebruiken om de JSON-gegevens op te halen.
Laten we eens kijken naar de AngularJS-code met $ http die kan worden gebruikt om de bovenstaande gegevens van de server te krijgen
Stap 3) Render de gegevens in uw weergave met behulp van de ng-repeat-instructie.
Hieronder gebruiken we de instructie ng-repeat om door elk van de sleutel-waardeparen in de JSON-objecten te gaan 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 is "Beschrijving".
{{x.Name}} {{x.Description}}
Overzicht:
- We hebben gekeken naar wat een RESTFUL-architectuur is, wat niets anders is dan een functionaliteit die wordt blootgelegd door webapplicaties op basis van de normale HTTP-werkwoorden van GET, POST, PUT en DELETE.
- Het $ resource-object wordt gebruikt met Angular om op een hoog niveau te communiceren met de RESTFUL-webtoepassingen, wat betekent dat we alleen de functionaliteit aanroepen die door de webtoepassing wordt weergegeven, maar we maken ons geen zorgen over hoe de functionaliteit wordt geïmplementeerd.
- We hebben ook gekeken naar de $ http-service die kan worden gebruikt om gegevens uit een webtoepassing te halen. Dit is mogelijk omdat de $ http-service kan werken met webapplicaties op een meer gedetailleerd niveau.
- Vanwege de kracht van de $ http-service kan deze worden gebruikt om gegevens uit een MySQL- of MS SQL-server te halen via een PHP-applicatie. De gegevens kunnen vervolgens in een tabel worden weergegeven met behulp van de instructie ng-repeat.