de jquery $ .ajax à angular $ http

J'ai ce morceau de code jQuery qui fonctionne bien à l'origine croisée:

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");
    }
});

Maintenant, je suis en train de convertir cela en code Angular.js sans succès:

$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;
});

Toute aide appréciée.

La manière AngularJS d'appeler $ http ressemblerait à ceci:

$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 pourrait être écrit encore plus simple en utilisant des méthodes de raccourci:

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

Il y a un certain nombre de choses à remarquer:

• La version AngularJS est plus concise (en particulier en utilisant la méthode .post ())
• AngularJS se chargera de la conversion des objets JS en chaîne JSON et de la définition des en-têtes (ceux-ci sont personnalisables)
• Les fonctions de rappel sont nommées successet errorrespectivement (veuillez également noter les paramètres de chaque rappel) - Obsolète dans angular v1.5
• utilisez thenplutôt la fonction.
• Plus d'informations sur l' thenutilisation peuvent être trouvées ici

Ce qui précède n'est qu'un exemple rapide et quelques pointeurs, assurez-vous de consulter la documentation AngularJS pour en savoir plus: http://docs.angularjs.org/api/ng.$http

Nous pouvons implémenter la requête ajax en utilisant le service http dans AngularJs, ce qui permet de lire / charger des données à partir d'un serveur distant.

Les méthodes de service $ http sont répertoriées ci-dessous,

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

Un des exemples:

    $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/

Vous pouvez utiliser ceci:

Télécharger "angular-post-fix": "^ 0.1.0"

Ajoutez ensuite 'httpPostFix' à vos dépendances tout en déclarant le module angulaire.

Réf: https://github.com/PabloDeGrote/angular-httppostfix

vous pouvez utiliser $ .param pour attribuer des données:

 $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;
 });

Regardez ceci: AngularJS + ASP.NET Web API Cross-Domain Issue