Il concetto di servizio in AngularJS sono funzioni per eseguire determinate attività, personalizzare entità, codice facile da mantenere e testare, i servizi svolgono un ruolo molto importante nelle applicazioni scritte in AngularJS. , ci sono già servizi disponibili che Angular ci ha fornito, ma noi può estenderlo completamente creando un nuovo Servizio. Ecco un elenco di alcuni dei servizi integrati in AngularJS:

 $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

Introduci alcuni servizi popolari o usa

$scope e $rootscope

Vedi di più nell'ambito dell'articolo in AngularJS

$ finestra

Simile all'oggetto finestra in javascript puro.

$ evento

Simile all'oggetto evento in javascript puro, utilizzato per catturare gli eventi

$ posizione

Rappresenta l'URL del browser corrente simile all'oggetto posizione in javascript puro

$ http

Per utilizzare questo servizio $http, è necessario comprendere l'architettura dell'API REST, puoi vedere di più nell'articolo Comunicare i servizi e concetto di API REST per ottenere maggiori informazioni prima di iniziare.

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

$http in angularJS è un servizio (business) in angularJS per comunicare con il server tramite i metodi .get(), .post() per ottenere dati o inviare dati tramite Ajax(), restituire i dati del messaggio come JSON, questo meccanismo è un meccanismo asincrono , javascript invia una richiesta al lato server, il codice sorgente continua ad essere eseguito senza attendere una risposta, quando il server invia i dati al browser, cattura i dati di ritorno e continua.Esegue il codice che il programmatore ha definito per funzionare con i dati restituiti come l'analisi dei dati, l'aggiornamento di HTML, ecc. Sono definiti metodi API REST di base come GET,POST,PUT,DELETE, disponibili nel servizio $http .

Sintassi:

 $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 } );

Inoltre, abbiamo anche scorciatoie per 2 metodi, rendendo la sintassi più concisa, possiamo scegliere il metodo giusto per noi da applicare.

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

Il servizio $http è una funzione, accetta 1 parametro, questo parametro è l'oggetto di configurazione (oggetto) per la richiesta, questo oggetto definisce lo stato per il metodo HTTP, il percorso dell'URL, se si configura l'intestazione per il metodo o può configurare body se il metodo è POST…

L'oggetto quando viene inviata o restituita una richiesta http ha la struttura seguente:

• data : sono i dati restituiti dal lato server secondo uno standard, possono essere stringa o testo
• stato : codice di stato HTTP
• intestazioni : fare riferimento alle informazioni sull'intestazione
• config : riferimento a un oggetto di configurazione della richiesta http

Quando viene chiamato un metodo HTTP, l'oggetto restituito viene chiamato oggetto promise. Questo oggetto contiene il metodo standard .then(), il che significa che dopo il segnale di ritorno riuscito. , fai qualcosa e cattura la situazione quando hai a che fare con successo o errore, i parametri nella funzione then() sono 2 funzioni di callback con il parametro che è una variabile di successo, che memorizzerà l'oggetto quando la richiesta ha esito positivo. La variabile di errore memorizza l'oggetto quando la richiesta ha riscontrato un errore. Il significato può essere compreso che, in caso di esito positivo, farà qualcosa con i dati restituiti nella variabile di successo, in modo simile alla variabile di errore quando si verifica un errore.

Ecco un esempio che utilizza il metodo get() del servizio $http per comunicare con il server

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

Considerando l'esempio sopra, sto inviando un metodo get al server tramite il servizio $http, i dati dopo essere stati recuperati vengono restituiti tramite il metodo .then(), questo metodo ha 2 parametri passati: un'altra funzione, il primo parametro è la funzione di callback quando si invia la richiesta con successo (200), il secondo parametro è la funzione chiamata quando la richiesta segnala un errore.

Ulteriore sviluppo, possiamo implementare funzionalità CRUD che mostrano un elenco di utenti, aggiungere nuovi utenti sul lato server combinando i metodi get e post

$ risorse

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

Il servizio $resource in angularJS ci consente di accedere alle applicazioni REST, simili a $http ma lo standard dei dati deve soddisfare lo standard JSON, rispettare la struttura corretta, il che significa che $resource riceve i dati dall'endpoint, i dati hanno una propria normalizzazione che interagisce con i dati e poi li rimanda indietro, il che è abbastanza utile per lo sviluppo di applicazioni CRUD. In confronto, $http interagirà con il server in modo più vario rispetto a $resource, ma con $resource, se i dati del livello del server sono normalizzati, l'operazione sarà più veloce.

Esempio di applicazione $ risorsa

Passaggio 1: crea il file index.html nella cartella delle risorse

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

Passaggio 2: creare il file listuser.json allo stesso livello del file di indice con l'array di oggetti della struttura json:

 [ { "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" } } ]

Differenza tra $ http e $ risorsa quando si accede tramite API REST

$http meccanismo di elaborazione del servizio tramite AJAX e la maggior parte dei programmatori utilizzerà nei casi in cui, tramite questo business, i programmatori creeranno GET,POST,DELETE … e gestiranno l'oggetto restituito, tuttavia, è meno comunemente usato nei progetti reali, forse perché della sua struttura complessa, meno codice di esempio e i dati di ritorno non sono una promessa, quindi è più difficile accedervi per i nuovi arrivati.

In uno scenario RESTful, $resource abbraccia $http, il che significa che con un servizio Web RESTful, $resource è l'opzione da utilizzare. Con $http possiamo inviare richieste al server con altre strutture, ad esempio inviare una richiesta a un sito Web che non segue la struttura dati dell'API e ricevere i dati restituiti come l'intero contenuto html restituito dalla richiesta. Per quanto riguarda $resource, segue la struttura di RESTful.

Ristangolare

documenti:

Un servizio che può accedere ai servizi REST è Restangular, che è una libreria di terze parti che viene iniettata nel progetto tramite inserimento delle dipendenze . Semplifica le richieste HTTP riducendo la quantità di codice da scrivere, può essere utilizzato per creare applicazioni API RESTful interattive sostituendo $http predefinito di angularJS, ovviamente i metodi predefiniti sono completi.

Punti di forza di Ristangular:

• Supporta tutti i metodi HTTP
• Non è necessario riscrivere l'URL molte volte, basta definire l'endpoint per le risorse una volta, la volta successiva seguirà la struttura dell'endpoint per comunicare
• Consenti la configurazione del metodo personalizzato

Esempio di implementazione del metodo GET con Retangular:

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

Gestione degli errori durante la comunicazione client-server

La gestione degli errori e la registrazione delle eccezioni sono molto importanti nella comunicazione, perché in realtà si verificano molte situazioni, come problemi di connessione, guasti dell'infrastruttura del server, guasti del database, ecc.

Usiamo try, catch, finally blocks per catturare queste eccezioni. In angularJS, c'è un modo per risparmiare tempo perché c'è un servizio $exceptionHandle usato per catturare le eccezioni e non influenzare il percorso dell'applicazione, perché questi errori di solito non sono correlati alla sintassi

Esempio di eccezione in angularJS:

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