Das Servicekonzept in AngularJS sind Funktionen, um bestimmte Aufgaben auszuführen, Entitäten zu personalisieren, Code einfach zu warten und zu testen, Services spielen eine sehr wichtige Rolle in Anwendungen, die in AngularJS geschrieben wurden. Es gibt bereits verfügbare Services, die Angular für uns bereitgestellt hat, aber wir kann es vollständig erweitern, indem Sie einen neuen Dienst erstellen. Hier ist eine Liste einiger der in AngularJS integrierten Dienste:

 $anchorScroll $animate $cacheFactory $compile $controller $document $exceptionHandler $filter $http $httpBackend $interpolate $interval $locale $location $log $parse $q $rootElement $rootScope $sce $sceDelegate $templateCache $templateRequest $timeout $window $event

Stellen Sie einige beliebte Dienste vor oder verwenden Sie sie

$scope und $rootscope

Weitere Informationen finden Sie im Artikelbereich in AngularJS

$Fenster

Ähnlich dem Fensterobjekt in reinem Javascript.

$ereignis

Ähnlich dem Ereignisobjekt in reinem Javascript, das zum Abfangen von Ereignissen verwendet wird

$standort

Repräsentiert die aktuelle Browser-URL ähnlich wie das Standortobjekt in reinem Javascript

$http

Um diesen $http-Dienst zu verwenden, müssen wir die REST-API-Architektur verstehen. Weitere Informationen finden Sie im Artikel Dienste kommunizieren und REST-API-Konzept , um sich vor dem Start mehr Wissen anzueignen.

Dokumente: https://docs.angularjs.org/api/ng/service/$http

$http in AngularJS ist ein Dienst (Geschäft) in AngularJS, um mit dem Server über .get()-, .post()-Methoden zu kommunizieren, um Daten abzurufen oder Daten über Ajax() zu senden, Nachrichtendaten als JSON zurückzugeben, dieser Mechanismus ist ein asynchroner Mechanismus , Javascript sendet eine Anfrage an die Serverseite, der Quellcode läuft weiter, ohne auf eine Antwort zu warten, wenn der Server Daten an den Browser zurücksendet, fängt er die Rückgabedaten ab und fährt fort. Führt den Code aus, den der Programmierer zum Arbeiten definiert hat mit den zurückgegebenen Daten wie Parsen von Daten, Aktualisieren von HTML usw. Grundlegende REST-API-Methoden wie GET, POST, PUT, DELETE sind definiert und im $http -Dienst verfügbar.

Syntax:

 $http({ method: 'GET', url: '/endpoint', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } // optional }) .then( function (success) { // do something when success }, function (error) { // do something when error } );

Darüber hinaus haben wir auch Abkürzungen für 2 Methoden, wodurch die Syntax prägnanter wird und wir die für uns geeignete Methode auswählen können.

 app.run(function($http) { $http.defaults.headers.common['Authorization'] = 'Basic APIKEY'; }); // optinal config header $http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);

$http service ist eine Funktion, nimmt 1 Parameter, dieser Parameter ist das Konfigurationsobjekt (Objekt) für die Anfrage, dieses Objekt definiert den Status für die HTTP-Methode, den URL-Pfad, konfiguriert den Header für die Methode, falls ja, oder kann konfigurieren Körper, wenn die Methode POST ist …

Das Objekt beim Senden oder Zurücksenden eines http-Requests hat folgende Struktur:

• data : sind die Daten, die von der Serverseite gemäß einem Standard zurückgegeben werden, können Zeichenfolgen oder Text sein
• status : HTTP-Statuscode
• Kopfzeilen : Siehe Kopfzeileninformationen
• config : Verweis auf ein HTTP-Anforderungskonfigurationsobjekt

Wenn eine HTTP-Methode aufgerufen wird, wird das zurückgegebene Objekt als Promise-Objekt bezeichnet. Dieses Objekt enthält die Standardmethode .then(), was bedeutet, dass nach dem erfolgreichen Rückgabesignal etwas getan wird und die Situation bei Erfolg oder Fehler abgefangen wird. Die Parameter in der Funktion then() sind 2 Rückruffunktionen, wobei der Parameter eine Erfolgsvariable ist, die das Objekt speichert, wenn die Anfrage erfolgreich ist. Die Fehlervariable speichert das Objekt, wenn die Anfrage auf einen Fehler gestoßen ist. Die Bedeutung kann so verstanden werden, dass bei Erfolg etwas mit den in der Erfolgsvariablen zurückgegebenen Daten gemacht wird, ähnlich wie bei der Fehlervariablen, wenn ein Fehler auftritt.

Hier ist ein Beispiel, das die get()- Methode des $http-Dienstes verwendet, um mit dem Server zu kommunizieren

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Basic keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $http) { $scope.listUser = []; $scope.getListUser = $http({ url: "https://urlservcer", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { $scope.users = data.data.records; }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html>

In Anbetracht des obigen Beispiels sende ich eine get-Methode über den $http-Dienst an den Server, die Daten werden nach dem Abrufen über die .then()-Methode zurückgegeben, diese Methode hat 2 übergebene Parameter: eine andere Funktion, den ersten Parameter ist die Callback-Funktion bei erfolgreichem Senden der Anfrage (200), der zweite Parameter ist die Funktion, die aufgerufen wird, wenn die Anfrage einen Fehler meldet.

In der Weiterentwicklung können wir CRUD-Funktionen implementieren, die eine Liste von Benutzern anzeigen, neue Benutzer auf der Serverseite hinzufügen, indem wir Get- und Post-Methoden kombinieren

$ressourcen

Dokumente: https://docs.angularjs.org/api/ngResource/service/$resource

Der $resource-Dienst in angleJS ermöglicht uns den Zugriff auf REST-Anwendungen, ähnlich wie $http, aber der Datenstandard muss dem JSON-Standard entsprechen und der korrekten Struktur entsprechen, was bedeutet, dass $resource Daten vom Endpunkt empfängt, die Daten haben ihre eigene Normalisierung interagiert mit den Daten und sendet sie dann zurück, was für die Entwicklung von CRUD-Anwendungen sehr nützlich ist. Im Vergleich dazu interagiert $http vielfältiger mit dem Server als $resource, aber mit $resource ist die Operation schneller, wenn die Serverschichtdaten normalisiert sind.

$resource .Anwendungsbeispiel

Schritt 1: Erstellen Sie die Datei index.html im Ressourcenordner

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example resourece</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> --> <script src="https://code.angularjs.org/1.2.32/angular-resource.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['ngResource']); // app.run(function($http) { // $http.defaults.headers.common['Authorization'] = 'Bearer keyMhcG4dscdHl3Nf'; // }); app.controller('listUserController', function ($scope, $resource) { $scope.users = []; $scope.getListUsers = $resource('http://localhost/resource/listuser.json').query(function(){ $scope.users = $scope.getListUsers; }); // console.log( $scope.getListUsers); }); </script> </html>

Schritt 2: Erstellen Sie die Datei listuser.json auf derselben Ebene wie die Indexdatei mit dem json-Strukturarray von Objekten:

 [ { "id": "recFrt8MNiEg4jInj", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0911222333", "username": "toan1234", "fullname": "username 3" } }, { "id": "recT2YNM75XbD4E4T", "createdTime": "2022-04-27T13:15:49.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recaE9soCIeZgyhVP", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0932321592", "username": "toanngo92", "fullname": "toan ngo" } }, { "id": "rectJwBmOAsWDWHnw", "createdTime": "2022-04-28T01:03:47.000Z", "fields": { "phonenumber": "0932159215", "username": "to9an1134", "fullname": "Toan ngo vinh" } }, { "id": "recvDBMvANFv5UiK8", "createdTime": "2022-04-22T09:19:18.000Z", "fields": { "password": "1234567", "phonenumber": "0782222567", "username": "toan123", "fullname": "username 2" } } ]

Unterschied zwischen $http und $resource beim Zugriff über die REST-API

$http-Dienstverarbeitungsmechanismus über AJAX, und die meisten Programmierer werden in Fällen verwenden, in denen Programmierer durch dieses Geschäft GET, POST, DELETE … erstellen und das zurückgegebene Objekt verarbeiten. Das zurückgegebene Objekt wird jedoch weniger häufig in echten Projekten verwendet, vielleicht weil seiner komplexen Struktur, weniger Beispielcode und der Rückgabedaten ist kein Versprechen, daher ist es für Neueinsteiger schwieriger zugänglich.

In einem RESTful-Szenario umarmt $resource $http, was bedeutet, dass bei einem RESTful-Webdienst $resource die zu verwendende Option ist. Mit $http können wir Anfragen mit anderen Strukturen an den Server senden, z. B. eine Anfrage an eine Website senden, die nicht der Datenstruktur der API folgt, und die zurückgegebenen Daten als den gesamten von der Anfrage zurückgegebenen HTML-Inhalt erhalten. $resource folgt der Struktur von RESTful.

Resteckig

Dokumente:

Ein Dienst, der auf REST-Dienste zugreifen kann, ist Restangular, eine Bibliothek eines Drittanbieters, die durch Abhängigkeitsinjektion in das Projekt eingefügt wird. Es vereinfacht HTTP-Anforderungen, indem es die Menge des zu schreibenden Codes reduziert, und kann verwendet werden, um interaktive RESTful-API-Anwendungen zu erstellen, die das standardmäßige $http von angleJS ersetzen, natürlich sind die Standardmethoden vollständig.

Stärken von Restangular:

• Unterstützt alle HTTP-Methoden
• Sie müssen die URL nicht viele Male neu schreiben, definieren Sie einfach den Endpunkt für Ressourcen einmal, das nächste Mal folgt der Endpunktstruktur zur Kommunikation
• Benutzerdefinierte Methodenkonfiguration zulassen

Beispiel bei der Implementierung der GET-Methode mit Restangular:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> <!-- bat buoc phai load lodash truoc khi load restangular --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/restangular@1.6.1/src/restangular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', ['restangular']); app.config(function (RestangularProvider) { RestangularProvider.setBaseUrl('https://api.airtable.com/v0/apppcdfKQ5q5rch7A'); RestangularProvider.setDefaultHeaders({ 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' }); }); app.controller('listUserController', function ($scope, Restangular) { $scope.users = []; $scope.getListUsers = Restangular.all('user').doGET().then(function (result) { $scope.users = result.records; console.log($scope.users); }); console.log($scope.getListUsers); }); </script> </html>

Fehlerbehandlung bei der Client-Server-Kommunikation

Fehlerbehandlung und Ausnahmeprotokollierung sind in der Kommunikation sehr wichtig, da in der Realität viele Situationen auftreten, z. B. Verbindungsprobleme, Serverinfrastrukturausfälle, Datenbankausfälle usw. .

Wir verwenden Try-, Catch- und Final-Blöcke, um diese Ausnahmen abzufangen. In angleJS gibt es eine Möglichkeit, Zeit zu sparen, da es einen $exceptionHandle-Dienst gibt, der verwendet wird, um Ausnahmen abzufangen und die Route der Anwendung nicht zu beeinflussen, da diese Fehler normalerweise nicht mit der Syntax zusammenhängen

Beispiel-Ausnahme in angleJS:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exmample Http method</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="listUserController"> <table> <tr> <th>Username</th> <th>Name</th> <th>Email</th> </tr> <tr ng-repeat="user in users"> <td>{{user.fields.username}}</td> <td>{{user.fields.fullname}}</td> <td>{{user.fields.phonenumber}}</td> </tr> </table> </div> </div> </body> <script> var app = angular.module('myApp', []); app.config(function($provide){ $provide.decorator('$exceptionHandler',function($delegate){ return function (exception,cause){ console.log(exception,cause); $delegate($exception,cause); } }); }); app.controller('listUserController', function ($scope, $http) { $scope.users = []; $http({ url: "https://api.airtable.com/v0/apppcdfKQ5q5rch7A/user", method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer APIKEY' } }).then( function (data) { console.log(data); $scope.users = data.data.records; console.log($scope.users); }, function (error) { console.log(error); alert("get list Failed"); }); // $scope.getListUser(); }); </script> </html>