Il servizio $http

AngularJS dispone di diversi servizi predefiniti utilizzabili nelle nostre applicazioni. Tra questi uno dei più utilizzati, soprattutto in un contesto di Single Page Application, è il servizio $http.

Questo servizio consente di effettuare chiamate Ajax al server e di gestire le risposte in maniera molto semplice. Esso mette a disposizione un oggetto che fornisce i metodi per invocare i corrispondenti metodi HTTP:

$http.get(url)
$http.post(url, dati)
$http.put(url, dati)
$http.delete(url)
$http.head(url)

Come possiamo notare, i metodi post e put prevedono un secondo parametro che rappresenta i dati da inviare al server. Se il parametro dati è un oggetto JavaScript, esso viene automaticamente serializzato in JSON.

I metodi del servizio $http restituiscono delle promise, cioè degli oggetti che consentono di gestire in maniera strutturata l'esito di chiamate asincrone.

Le promise restituite dai metodi di $http mettono a disposizione i metodi:

Metodo	Descrizione
success()	consente di gestire la risposta del server in caso di esito positivo
error()	per gestire situazioni di errore

Vediamo con un esempio come poter utilizzare il servizio $http all'interno di un controller e sfruttare i metodi della promise restituita:

angular.module("myApp")
	.controller("elencoController", function($scope, $http) {
		$http.get("/elencoCitta")
			.success(function(data) {
				$scope.elencoCitta = data;
			})
			.error(function() {
				alert("Si è verificato un errore!");
			});
	});

Questo controller carica l'elenco delle città da visualizzare effettuando una chiamata al server. In questo caso ricorriamo al servizio $http definendone la dipendenza nei parametri del metodo controller(). Quindi utilizziamo il metodo get() specificando l'URL relativo sul server e concateniamo le chiamate a success() ed error() per gestire l'esito della richiesta.

In caso di successo, i dati restituiti dal server vengono associati alla variabile di scope elencoCitta.

Per un esempio di utilizzo del metodo post() di $http, rivediamo l'implementazione del controller cittaController che aggiunge una città all'elenco:

angular.module("myApp")
	.controller("cittaController", function($scope, $http) {
		$scope.aggiungiCitta = function() {
			$http.post("/elencoCitta", {nome: $scope.nome, regione: $scope.regione})
				.success(function() {
					alert("Città aggiunta correttamente!");
				})
				.error(function() {
					alert("Si è verificato un errore!");
				});
		};
	});

Possiamo vedere anche in questo caso come l'uso del metodo post() sia abbastanza intuitivo. Il secondo parametro del metodo costruisce l'oggetto da inviare al server in base all'input dell'utente associato alle variabili di scope nome e regione.

Tutti i metodi del servizio $http corrispondenti ai metodi HTTP prevedono un ulteriore parametro opzionale che consente di specificare eventuali configurazioni aggiuntive per la richiesta da inviare al server. Questo parametro prevede un oggetto con le seguenti possibili proprietà:

Proprietà	Descrizione
method	Stringa che rappresenta il metodo HTTP da utilizzare nella richiesta. In realtà questo valore è implicitamente impostato dal metodo invocato, quindi raramente questa impostazione viene utilizzata
url	URL su cui invocare il metodo. Anche in questo caso questa impostazione raramente viene utilizzata dal momento che l'URL viene passata come parametro del metodo invocato
params	Oggetto JavaScript che rappresenta eventuali parametri da aggiungere in coda all'URL
headers	Oggetto JavaScript che rappresenta gli header HTTP da inviare al server con la richiesta
timeout	Tempo massimo di attesa di una risposta da parte del server espresso in millisecondi
transformRequest	Funzione che può trasformare la richiesta prima di inviarla al server
transformResponse	Funzione che può trasformare la risposta prima di passarla all'applicazione

Il seguente esempio mostra come specificare un timeout e l'header della Basic Authentication ad una richiesta HTTP:

$http.get("/elencoCitta",
	      { timeout: 30000,
		    headers: {
				"Authorization": "Basic bm9tZXV0ZW50ZTpwYXNzd29yZA=="}
          });

Abbiamo visto come il metodo success() delle promise restituite da get() e post() di $http ci fornisce, tramite il parametro data, i dati inviati dal server.

In realtà, sia il metodo success() che il metodo error() forniscono informazioni sull'esito delle richieste tramite quattro parametri:

Parametro	Descrizione
data	Rappresenta i dati restituiti dal server alla richiesta effettuata dalla nostra applicazione
status	È il codice di stato HTTP inviato dal server
headers	Rappresenta gli header HTTP inviati dal server con la risposta
config	Rappresenta la configurazione HTTP utilizzata per effettuare la chiamata, cioè il parametro opzionale impostato implicitamente o esplicitamente nella chiamata del metodo di $http

Sfruttando questi parametri possiamo analizzare in dettaglio la risposta del server e fornire un feedback adeguato all'utente in caso di errore.