[解決済み] jquery $.ajaxからangular $httpへ。

質問

私は、クロスオリジンでうまく動作するjQueryのコードのこの部分を持っています。

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

今、私はこれをAngular.jsのコードに変換しようとしていますが、うまくいきません。

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

どんな助けでも感謝します。

どのように解決するのですか？

AngularJSの$httpの呼び出し方は、次のようになります。

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

といった具合に、ショートカットメソッドを使ってもっと簡単に書くこともできます。

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

気づくことがいくつもあります。

• AngularJSバージョンはより簡潔です（特に.post()メソッドの使用）。
• JSオブジェクトのJSON文字列への変換とヘッダの設定はAngularJSが行う（これらはカスタマイズ可能）。
• コールバック関数の名前は success と error をそれぞれ指定します（各コールバックのパラメータにも注意してください） - angular v1.5で非推奨となりました。
• 使用する then 関数を使用します。
• の詳細 then の使い方は はこちら

上記は簡単な例といくつかのポインタです。詳細はAngularJSのドキュメントを確認してください。 http://docs.angularjs.org/api/ng.$http