de jquery $ .ajax para angular $ http

Eu tenho este pedaço de código jQuery que funciona bem origem cruzada:

jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "application/json; charset=utf-8", success: function (response) { console.log("success"); }, error: function (response) { console.log("failed"); } }); 

Agora estou tentando converter isso em código Angular.js sem sucesso:

 $http({ url: "http://example.appspot.com/rest/app", dataType: "json", method: "POST", data: JSON.stringify({"foo":"bar"}), headers: { "Content-Type": "application/json; charset=utf-8" } }).success(function(response){ $scope.response = response; }).error(function(error){ $scope.error = error; }); 

Qualquer ajuda apreciada.

A maneira AngularJS de chamar $ http seria semelhante a:

 $http({ url: "http://example.appspot.com/rest/app", method: "POST", data: {"foo":"bar"} }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available $scope.data = response.data; }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. $scope.error = response.statusText; }); 

ou poderia ser escrito ainda mais simples usando methods de atalho:

 $http.post("http://example.appspot.com/rest/app", {"foo":"bar"}) .then(successCallback, errorCallback); 

Há várias coisas para notar:

  • A versão do AngularJS é mais concisa (especialmente usando o método .post ())
  • O AngularJS cuidará da conversão de objects JS em strings JSON e headers de configuração (aqueles são customizáveis)
  • As funções de retorno de chamada são nomeadas com success e error respectivamente (observe também os parâmetros de cada retorno de chamada) – Descontinuado em versão angular v1.5
  • use then function.
  • Mais informações sobre o uso podem ser encontradas aqui

O acima é apenas um exemplo rápido e alguns pointers, não deixe de conferir a documentação do AngularJS para mais informações: http://docs.angularjs.org/api/ng.$http

Podemos implementar o pedido ajax usando o serviço http no AngularJs, que ajuda a ler / carregar dados do servidor remoto.

Os methods de serviço $ http estão listados abaixo,

  $http.get() $http.post() $http.delete() $http.head() $http.jsonp() $http.patch() $http.put() 

Um dos exemplos:

  $http.get("sample.php") .success(function(response) { $scope.getting = response.data; // response.data is an array }).error(){ // Error callback will trigger }); 

http://www.drtuts.com/ajax-requests-angularjs/

Você pode usar isto:

Download “angular-post-fix”: “^ 0.1.0”

Em seguida, adicione ‘httpPostFix’ às suas dependencies enquanto declara o módulo angular.

Ref: https://github.com/PabloDeGrote/angular-httppostfix

você pode usar $ .param para atribuir dados:

  $http({ url: "http://example.appspot.com/rest/app", method: "POST", data: $.param({"foo":"bar"}) }).success(function(data, status, headers, config) { $scope.data = data; }).error(function(data, status, headers, config) { $scope.status = status; }); 

veja isto: Problema entre domínios do AngularJS + ASP.NET Web API