AngularJS AJAX - $http

$http é um serviço do AngularJS, usado para ler dados de um servidor remoto.

AngularJS $http

AngularJS $http O serviço envia uma solicitação para o servidor e retorna a resposta.

Exemplo

Envie uma solicitação simples para o servidor e mostre o resultado no título:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Mensagem de boas-vindas de hoje:</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>

Experimente você mesmo

método

O exemplo acima usa $http do serviço .get Método.

O método .get é uma maneira rápida do serviço $http. Existem várias maneiras rápidas:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

Os seguintes métodos são maneiras rápidas de 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;
  });
});

Experimente você mesmo

O exemplo acima usa um objeto como parâmetro para executar o serviço $http. O objeto especifica o método HTTP, URL, ação a ser executada com sucesso e ação a ser executada em caso de falha.

Propriedade

A resposta do servidor é um objeto que possui as seguintes propriedades:

  • .config Objeto usado para gerar a solicitação
  • .data Cadeia de caracteres ou objeto, que carrega a resposta do servidor
  • .headers Função usada para obter informações de cabeçalho
  • .status Definir números de estado HTTP
  • .statusText Definir strings de estado 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;
  });
});

Experimente você mesmo

Para lidar com erros, envie para .then Adicionar um método adicionando uma função:

Exemplo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Primeira função lida com sucesso
    $scope.content = response.data;
  }, function(response) {
    // Segunda função lida com erro
    $scope.content = "Algo deu errado";
  });
});

Experimente você mesmo

JSON

Os dados obtidos da resposta devem estar no formato JSON.

JSON é uma excelente maneira de transmitir dados e é fácil de usar no AngularJS ou em qualquer outro JavaScript.

Por exemplo: no servidor temos um arquivo que retorna um objeto JSON contendo 15 clientes, todos eles encapsulados em um nome chamado registros do array.

Clique aqui para ver o objeto JSON.

Exemplo

A diretiva ng-repeat é perfeita para percorrer um array:

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in meusDados">
    {{ x.Nome + ', ' + x.Pais }}
  </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>

Experimente você mesmo

Descrição da Aplicação:

a aplicação define customersCtrl controlador, com scope e http objeto.

$http é um Objeto XMLHttpRequest, usado para solicitar dados externos.

$http.get() Lidos de https://www.codew3c.com/angular/customers.php Dados JSON.

Após a realização com sucesso, o controlador cria um atributo no escopo myData, que contém dados JSON do servidor.