AJAX ist die Kurzform von asynchronem JavaScript und XML. AJAX wurde hauptsächlich zum Aktualisieren von Teilen einer Webseite entwickelt, ohne die gesamte Seite neu zu laden.
Der Grund für das Entwerfen dieser Technologie bestand darin, die Anzahl der zwischen dem Client und dem Server durchgeführten Roundtrips und die Anzahl der gesamten Seitenaktualisierungen zu reduzieren, die immer dann stattfanden, wenn ein Benutzer bestimmte Informationen benötigte.
Mit AJAX konnten Webseiten asynchron aktualisiert werden, indem kleine Datenmengen hinter den Kulissen mit dem Server ausgetauscht wurden. Dies bedeutete, dass es möglich war, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.
Viele moderne Webanwendungen folgen dieser Technik, um die Seite zu aktualisieren oder Daten vom Server abzurufen.
In diesem Tutorial lernen Sie:
- Interaktionen auf hoher Ebene mit Servern, die $ resource verwenden
- Low-Level-Serverinteraktionen mit $ http
- Abrufen von Daten von einem Server, auf dem SQL und MySQL ausgeführt werden
Interaktionen auf hoher Ebene mit Servern, die $ resource verwenden
Angular bietet zwei verschiedene APIs zur Verarbeitung von Ajax-Anforderungen. Sie sind
- $ resource
- $ http
Wir werden uns die Eigenschaft "$ resource" in Angular ansehen, die zur Interaktion mit Servern auf hoher Ebene verwendet wird.
Wenn wir über die Interaktion auf einer höheren Ebene sprechen, bedeutet dies, dass wir uns nur darum kümmern, was der Server in Bezug auf die Funktionalität zu bieten hat, und nicht darum, was genau der Server in Bezug auf diese Funktionalität im Detail tut.
Wenn der Server beispielsweise eine Anwendung gehostet hat, die die Mitarbeiterinformationen eines bestimmten Unternehmens verwaltet, kann der Server Clients wie GetEmployeeDetails, SetEmployeeDetails usw. Funktionen zur Verfügung stellen.
Auf hoher Ebene wissen wir also, was diese beiden Funktionen können, und wir können sie mithilfe der Eigenschaft $ resource aufrufen. Aber dann kennen wir die Details der "GetEmployeeDetails" - und der "SetEmployeeDetails" -Funktionen und deren Implementierung nicht genau.
Die obige Erklärung erklärt, was als REST-basierte Architektur bekannt ist.
- REST ist als Representational State Transfer bekannt, eine Architektur, die in vielen modernen webbasierten Systemen verwendet wird.
- Dies bedeutet, dass Sie die normalen HTTP-Verben GET, POST, PUT und DELETE verwenden können, um mit einer webbasierten Anwendung zu arbeiten.
Nehmen wir also an, wir haben eine Webanwendung, die eine Liste von Ereignissen verwaltet.
Wenn wir zur Liste aller Ereignisse gelangen wollten,
- Die Webanwendung kann eine URL wie http: // example / events und verfügbar machen
- Wir können das Verb "GET" verwenden, um die gesamte Liste der Ereignisse abzurufen, wenn die Anwendung einer REST-basierten Architektur folgt.
Wenn es beispielsweise ein Ereignis mit der ID 1 gab, können wir die Details dieses Ereignisses über die URL abrufen. http: // example / events / 1
Was ist das $ resource-Objekt?
Das $ resource-Objekt in Angular hilft bei der Arbeit mit Servern, die Anwendungen auf einer REST-basierten Architektur bereitstellen.
Die grundlegende Syntax der @ resource-Anweisung sowie die verschiedenen Funktionen sind unten angegeben
Syntax der @ resource-Anweisung
var resource Object = $resource(url);
Sobald Sie das resourceObject zur Hand haben, können Sie die folgenden Funktionen verwenden, um die erforderlichen REST-Aufrufe durchzuführen.
1. get ([params], [success], [error]) - Dies kann verwendet werden, um den Standard-GET-Aufruf durchzuführen.
2. save ([params], postData, [success], [error]) - Dies kann verwendet werden, um den Standard-POST-Aufruf durchzuführen.
3. query ([params], [success], [error]) - Dies kann verwendet werden, um den Standard-GET-Aufruf durchzuführen, aber ein Array wird als Teil der Antwort zurückgegeben.
4. remove ([params], postData, [success], [error]) - Dies kann verwendet werden, um den Standardaufruf DELETE auszuführen.
In allen unten angegebenen Funktionen kann der Parameter 'params' verwendet werden, um die erforderlichen Parameter bereitzustellen, die in der URL übergeben werden müssen.
Zum Beispiel,
- Angenommen, Sie übergeben einen Wert von Topic: 'Angular' als 'param' in der get-Funktion als
- get (' http: // example / events ', '{Topic:' Angular '}')
- Die URL http: // example / events? Topic = Angular wird als Teil der Funktion get aufgerufen.
Verwendung der Eigenschaft $ resource
Um die Eigenschaft $ resource zu verwenden, müssen die folgenden Schritte ausgeführt werden:
Schritt 1) Die Datei "angle-resource.js" muss von der Angular.JS-Site heruntergeladen und in der Anwendung abgelegt werden.
Schritt 2) Das Anwendungsmodul sollte eine Abhängigkeit vom Modul "ngResource" deklarieren, um die Ressource $ zu verwenden.
Im folgenden Beispiel rufen wir das Modul "ngResource" aus unserer 'DemoApp'-Anwendung auf.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Schritt 3) Aufrufen der Funktion $ resource () mit Ihrem REST-Endpunkt, wie im folgenden Beispiel gezeigt.
Wenn Sie dies tun, kann das $ resource-Objekt die erforderlichen Funktionen aufrufen, die von den REST-Endpunkten bereitgestellt werden.
Im folgenden Beispiel wird die Endpunkt-URL aufgerufen: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
Im obigen Beispiel werden die folgenden Dinge getan
-
Bei der Definition der Angular-Anwendung wird ein Service mithilfe der Anweisung 'DemoApp.services' erstellt, wobei DemoApp der Name ist, der unserer Angular-Anwendung gegeben wurde.
-
Die .factory-Methode wird verwendet, um die Details dieses neuen Dienstes zu erstellen.
-
"Eintrag" ist der Name, den wir unserem Service geben. Dies kann ein beliebiger Name sein, den Sie angeben möchten.
-
In diesem Service erstellen wir eine Funktion, die die $ resource-API aufruft
-
$ resource ('/ example / Event /: 1).
Die $ resource-Funktion ist ein Service, mit dem ein REST-Endpunkt aufgerufen wird. Der REST-Endpunkt ist normalerweise eine URL. In der obigen Funktion verwenden wir die URL (/ example / Event /: 1) als unseren REST-Endpunkt. Unser REST-Endpunkt (/ example / Event /: 1) zeigt an, dass sich auf unserer Hauptwebsite "Beispiel" eine Ereignisanwendung befindet. Diese Ereignisanwendung wird unter Verwendung einer REST-basierten Architektur entwickelt.
-
Das Ergebnis des Funktionsaufrufs ist ein Ressourcenklassenobjekt. Das Ressourcenobjekt verfügt nun über die Funktionen (get (), query (), save (), remove (), delete ()), die aufgerufen werden können.
Schritt 4) Wir können jetzt die Methoden verwenden, die im obigen Schritt zurückgegeben wurden (get (), query (), save (), remove (), delete ()) in unserem Controller.
Im folgenden Codeausschnitt verwenden wir die Funktion get () als Beispiel
Schauen wir uns den Code an, der die Funktion get () verwenden kann.
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
Im obigen Schritt
- Die Funktion get () im obigen Snippet gibt eine GET-Anforderung an / example / Event /: 1 aus.
- Der Parameter: 1 in der URL wird durch $ scope.id ersetzt.
- Die Funktion get () gibt ein leeres Objekt zurück, das automatisch ausgefüllt wird, wenn die tatsächlichen Daten vom Server stammen.
- Das zweite Argument für get () ist ein Rückruf, der ausgeführt wird, wenn die Daten vom Server eingehen. Die mögliche Ausgabe des gesamten Codes wäre ein JSON-Objekt, das die Liste der Ereignisse zurückgibt, die von der "Beispiel" -Website verfügbar gemacht wurden.
Ein Beispiel für die Rückgabe ist unten dargestellt
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Low-Level-Serverinteraktionen mit $ http
$ Http ist ein weiterer Angular JS-Dienst, mit dem Daten von Remoteservern gelesen werden. Die beliebteste Form von Daten, die von Servern gelesen werden, sind Daten im JSON-Format.
Nehmen wir an, wir haben eine PHP-Seite ( http: //example/angular/getTopics.PHP ), die die folgenden JSON-Daten zurückgibt
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Schauen wir uns den AngularJS-Code mit $ http an, mit dem die oben genannten Daten vom Server abgerufen werden können
Im obigen Beispiel
- Wir fügen den $ http-Dienst zu unserer Controller-Funktion hinzu, damit wir die "get" -Funktion des $ http-Dienstes verwenden können.
- Wir verwenden jetzt die Funktion get vom HTTP-Dienst, um die JSON-Objekte von der URL http: // example /angular/getTopics.PHP abzurufen
- Basierend auf dem 'response'-Objekt erstellen wir eine Rückruffunktion, die die Datensätze zurückgibt, und speichern sie anschließend im $ scope-Objekt.
- Wir können dann die Variable $ scope.names vom Controller verwenden und sie in unserer Ansicht verwenden, um die JSON-Objekte entsprechend anzuzeigen.
Abrufen von Daten von einem Server, auf dem SQL und MySQL ausgeführt werden
Angular kann auch zum Abrufen von Daten von einem Server verwendet werden, auf dem MySQL oder SQL ausgeführt wird.
Die Idee ist, dass Sie sicherstellen müssen, dass sowohl die PHP- als auch die ASP.Net-Seite die Daten im JSON-Format rendern, wenn eine PHP-Seite eine Verbindung zu einer MySQL-Datenbank oder eine Asp.Net-Seite zu einer MS SQL Server-Datenbank herstellt.
Nehmen wir an, wir haben eine PHP-Site ( http: // example /angular/getTopics.PHP ), die Daten aus einer MySQL- oder SQL-Datenbank bereitstellt .
Schritt 1) Der erste Schritt besteht darin, sicherzustellen, dass die PHP-Seite die Daten aus einer MySQL-Datenbank entnimmt und die Daten im JSON-Format bereitstellt.
Schritt 2) Schreiben Sie den oben gezeigten ähnlichen Code, um den Dienst $ http zum Abrufen der JSON-Daten zu verwenden.
Schauen wir uns den AngularJS-Code mit $ http an, mit dem die oben genannten Daten vom Server abgerufen werden können
Schritt 3) Rendern Sie die Daten in Ihrer Ansicht mit der Anweisung ng-repeat.
Im Folgenden verwenden wir die Anweisung ng-repeat, um jedes der Schlüssel-Wert-Paare in den JSON-Objekten zu durchlaufen, die von der Methode "get" des Dienstes $ http zurückgegeben werden.
Für jedes JSON-Objekt wird der Schlüssel "Name" und der Wert "Description" angezeigt.
{{x.Name}} {{x.Description}} Zusammenfassung:
- Wir haben uns angesehen, was eine RESTFUL-Architektur ist, die nichts anderes als eine Funktionalität ist, die von Webanwendungen auf der Grundlage der normalen HTTP-Verben GET, POST, PUT und DELETE bereitgestellt wird.
- Das $ resource-Objekt wird mit Angular verwendet, um auf hoher Ebene mit den RESTFUL-Webanwendungen zu interagieren. Dies bedeutet, dass wir nur die von der Webanwendung bereitgestellte Funktionalität aufrufen, uns aber nicht darum kümmern, wie die Funktionalität implementiert wird.
- Wir haben uns auch den $ http-Dienst angesehen, mit dem Daten aus einer Webanwendung abgerufen werden können. Dies ist möglich, weil der $ http-Dienst mit Webanwendungen auf einer detaillierteren Ebene arbeiten kann.
- Aufgrund der Leistungsfähigkeit des $ http-Dienstes kann dies verwendet werden, um Daten von einem MySQL- oder MS SQL-Server über eine PHP-Anwendung abzurufen. Die Daten können dann mit der Anweisung ng-repeat in einer Tabelle gerendert werden.