tutoriais mais recente desenvolvimento web
 

AngularJS AJAX - $ http

❮ Anterior Próxima Capítulo ❯

$ http é um serviço AngularJS para leitura de dados a partir de servidores remotos.

AngularJS $ http

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

Exemplo

Faça um simples pedido para o servidor, e exibir 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>
Tente você mesmo "

Métodos

O exemplo acima usa a .get método da $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 os atalhos 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 mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
Tente você mesmo "

O exemplo acima executa o serviço http $ com um objeto como um argumento. O objeto é especificar o método HTTP, a URL, o que fazer em caso de sucesso, eo que fazer em caso de falha.

propriedades

A resposta do servidor é um objecto com as seguintes propriedades:

  • .config o objecto utilizado para gerar o pedido.
  • .data uma corda, ou um objeto, levando a resposta do servidor.
  • .headers uma função para usar para obter informações de cabeçalho.
  • .status um número que define o status HTTP.
  • .statusText uma string definindo 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;
    });
});
Tente você mesmo "

Para lidar com erros, adicionar mais um funciona ao .then mé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";
    });
});
Tente você mesmo "

JSON

Os dados que você começa a partir da resposta é esperado para estar no formato JSON.

JSON é uma ótima maneira de transporte de dados, e é fácil de usar dentro AngularJS, ou qualquer outro JavaScript.

Exemplo: No servidor temos um arquivo que retorna um objeto JSON contendo 15 clientes, tudo embrulhado em array chamado records .

Dê uma olhada no objeto JSON.

×

customers.php 

 {{Data | json}}

Exemplo

O ng-repeat directiva é perfeito para loop através de uma matriz:

<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>
Tente você mesmo "

Aplicação explicou:

A aplicação define o customersCtrl controlador, com um $scope e $http objeto.

$http é um objeto XMLHttpRequest para solicitar dados externos.

$http.get() lê os dados JSON de http://www.w3ii.com/angular/customers.php .

Em caso de sucesso, o controlador cria uma propriedade, myData , no âmbito, com dados JSON do servidor.


❮ Anterior Próxima Capítulo ❯