AngularJS dispone di un servizio specifico low-level (a bassa astrazione) per effettuare richieste HTTP.
Supponiamo di voler effettuare una richiesta GET con parametri aggiunti alla query string ad una API remota. Possiamo usare il servizio $http. Sebbene sia un servizio a bassa astrazione, questo servizio è alla base di tutte le funzionalità HTTP e AJAX di AngularJS.
$http, come il suo "omologo" $.ajax() in jQuery, fa uso dei deferred object: la richiesta può avere esito positivo o negativo, ossia la promise può essere risolta o rigettata a seconda della risposta del server.
Noterete che il metodo .then() accetta appunto due funzioni di callback: la prima viene eseguita se la richiesta ha avuto successo, la seconda in caso di errore. La configurazione della richiesta GET con i suoi parametri avviene nell'oggetto letterale passato come secondo parametro (il primo parametro è l'URL remoto).
Le proprietà dell'oggetto params verranno serializzate in una query string, ossia ?q=Vasto&mode=json&units=metric&days=7:
var app = angular.module('MyApp', []);
app.controller('WeatherCtrl', ['$scope', '$http', function($scope, $http) {
$scope.title = 'Vasto';
$scope.dataLoaded = false;
$scope.data = [];
$http.get('http://api.openweathermap.org/data/2.5/forecast/daily', {
params: {
q: 'Vasto',
mode: 'json',
units: 'metric',
days: 7
}
}).then(function(response) {
$scope.dataLoaded = true;
var list = response.data.list;
$scope.data = list;
}, function(response) {
console.log(response);
});
}]);
Ecco il codice HTML:
<body ng-app="MyApp">
<div id="results" ng-controller="WeatherCtrl">
<h1>Previsioni meteo per {{title}}</h1>
<div id="loader" ng-show="!dataLoaded"></div>
<ul id="list" ng-cloak>
<li ng-repeat="item in data">
<time>{{(item.dt * 1000) | date:'dd-MM-yyyy'}}</time>
<p>Min: {{item.temp.min}}, Max: {{item.temp.max}}, {{item.weather[0].description}}</p>
</li>
</ul>
</div>
</body>