今さら人に聞けないmonacaのangularでajax通信を行う方法

monacaのangularで実装するにあたりajaxだけjQueryというのもなんだか変な気がする。

そこでangularでHTTP通信を行うことができないか調査をしてみた。

いつも通りangularのリファレンスに表示されているAPI一覧を眺めていて、$httpというのがあったので試しにこれかなと思い先を読み進めてみました。

で、結果としてはビンゴで、早速、下記のようにプログラムを組んでみました。

<ons-page ng-controller="MainPageController">
  <ons-button ng-click="_request()">Run</ons-button>
</ons-page>
<script>
var module = angular.module('mainApp', ['onsen']);
module.controller('MainPageController', function($scope) {
  $scope._request = function(){
    $http({
        method: 'GET',
        url: './data.txt'
    }).then(function successCallback(response) {
      // this callback will be called asynchronously
      // when the response is available
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });
  };
});
</script>

実行してみるとエラーで、何故かな～っと思って調査をしてみると、どうやら下記のように実装したところ正常に動作した。

<ons-page ng-controller="MainPageController">
  <ons-button ng-click="_request()">Run</ons-button>
</ons-page>
<script>
var module = angular.module('mainApp', ['onsen']);
module.controller('MainPageController', ['$scope','$http',function($scope, $http){
  $scope._request = function(){
    $http({
      method: 'GET',
      url: './data.txt'
    }).then(function successCallback(response) {
      console.log(response)
      //dataプロパティでレスポンスボディデータにアクセス
      console.log(response.data)
      //typeはobject
      console.log(typeof response.data)
      // this callback will be called asynchronously
      // when the response is available
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });
  };
}]);
</script>

めでたし、めでたし。