AngularJS AJAX - $http
$http é um serviço AngularJS para leitura de dados de servidores remotos.
AngularJS $http
O serviço AngularJS $httpfaz uma solicitação ao servidor e retorna uma resposta.
Exemplo
Faça uma solicitação simples ao servidor e exiba o resultado em um cabeçalho:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome
message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome
= response.data;
});
});
</script>
Métodos
O exemplo acima usa o .getmétodo do $http
serviço.
O método .get é um método de atalho do serviço $http. Existem vários métodos de atalho:
.delete().get().head().jsonp().patch().post().put()
Os métodos acima são todos atalhos para chamar o serviço $http:
Exemplo
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response)
{
$scope.myWelcome =
response.statusText;
});
});
O exemplo acima executa o serviço $http com um objeto como argumento. O objeto está especificando o método HTTP, a url, o que fazer em caso de sucesso e o que fazer em caso de falha.
Propriedades
A resposta do servidor é um objeto com estas propriedades:
.configo objeto usado para gerar a solicitação..datauma string, ou um objeto, carregando a resposta do servidor..headersuma função a ser usada para obter informações de cabeçalho..statusum número que define o status HTTP..statusTextuma string que define o status HTTP.
Exemplo
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content
= response.data;
$scope.statuscode
= response.status;
$scope.statustext
= response.statusText;
});
});
Para lidar com erros, adicione mais uma função ao .thenmétodo:
Exemplo
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
$scope.content
= response.data;
}, function(response) {
// Second function handles error
$scope.content = "Something went wrong";
});
});
JSON
Espera-se que os dados obtidos da resposta estejam no formato JSON.
JSON é uma ótima maneira de transportar dados e é fácil de usar no AngularJS ou em qualquer outro JavaScript.
Exemplo: No servidor temos um arquivo que retorna um objeto JSON contendo 15 clientes, todos envoltos em um array chamado records.
Clique aqui para dar uma olhada no objeto JSON.
Exemplo
A ng-repeatdiretiva é perfeita para percorrer um array:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li
ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('customersCtrl',
function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData
= response.data.records;
});
});
</script>
Aplicação explicada:
A aplicação define o customersCtrlcontrolador, com um
objeto $scopee
.$http
$httpé um objeto XMLHttpRequest para solicitar dados externos.
$http.get()lê dados JSON de
https://www.w3schools.com/angular/customers.php .
Em caso de sucesso, o controlador cria uma propriedade, myData, no escopo, com dados JSON do servidor.