Javascript 在ionic services.js文件中对第三方API进行ajax调用？

今天开始使用爱奥尼亚，但遇到了一个小问题。 services.js文件有一条注释

//此处可能使用返回JSON数组的资源

我想对API进行ajax调用，但我不知道如何在services.js文件中删除自定义资源。 我将从该调用中接收一个JSON数组，并将使用列表thre on

问题：如何将自定义变量声明为一个列表，该列表对第三方API进行ajax调用

angular.module('starter.services', [])

.factory('Chats', function() {
// Might use a resource here that returns a JSON array
 var popularURL = 'SOME_API_RUL';
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (xhttp.readyState == 4 && xhttp.status == 200) {
    var chats = xhttp.responseText;
  }
};
xhttp.open("GET", popularURL, true);
xhttp.send();

return {
  all: function() {
    return chats;
  },
  remove: function(chat) {
    chats.splice(chats.indexOf(chat), 1);
  },
  get: function(chatId) {
  for (var i = 0; i < chats.length; i++) {
    if (chats[i].id === parseInt(chatId)) {
      return chats[i];
    }
  }
  return null;
  }
};

angular.module（'starter.services'，[]）
.factory（'Chats'，function（）{
//此处可能使用返回JSON数组的资源
var popular='SOME_API_RUL'；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
var chats=xhttp.responseText；
}
};
xhttp.open（“GET”，popularURL，true）；
xhttp.send（）；
返回{
全部：函数（）{
回访聊天；
},
删除：功能（聊天）{
chats.splice（chats.indexOf（chat），1）；
},
获取：函数（chatId）{
for（var i=0；i

聊天列表从不填充。如何在爱奥尼亚服务.js文件中正确地进行ajax调用

---

谢谢！

您可以这样做：

angular.module('starter.services', [])

.factory('Chats', function($http) {

  var API_URL = 'https://api.herokuapp.com';

  return {
    all: function() {
      return $http.get(API_URL + '/chats');
    }
  };
});

在控制器中：

Chats.all().then(function(chats){
  $scope.chats = chats;
})

---

您可以查看文档

谢谢Mati Tucci。我会在这里发布更详细的awnser

步骤：

在app.js文件内的视图中声明要使用的控制器。在我的示例中：

.state('tab.popular', {
  url: '/popular',
  views: {
    'tab-popular': {
      templateUrl: 'templates/tab-popular.html',
      controller: 'PopularShowsCtrl' //<---CONTROLLER NAME YOU ARE USING
    }
  }
})

.controller('PopularShowsCtrl', function($scope, PopularShows){
   $scope.popShows = PopularShows.all(); //<---$scope.popShows is a declaration and you don't need to declare this variable beforehand.
})

.factory('PopularShows', function($http){
// Might use a resource here that returns a JSON array
  return {
    all: function() {
       return $http.get('YOUR_API_URL');
    },
    get: function(popShowId) {
    // Simple index lookup
      return popShows[popShowId];
    }
  }
});

<ion-view view-title="Popular">
 <ion-content>
  <ion-list>
   <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="popShow in popShows" type="item-text-wrap">
    <h2>{{popShow.name}}</h2>
    <p>{{popShow.popularity}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-click="remove(popShow)">
      Delete
     </ion-option-button>
    </ion-item>
  </ion-list>    
 </ion-content>
</ion-view>

处理popShows变量，该变量是html文件中的JSON列表。在我的示例中：

.state('tab.popular', {
  url: '/popular',
  views: {
    'tab-popular': {
      templateUrl: 'templates/tab-popular.html',
      controller: 'PopularShowsCtrl' //<---CONTROLLER NAME YOU ARE USING
    }
  }
})

.controller('PopularShowsCtrl', function($scope, PopularShows){
   $scope.popShows = PopularShows.all(); //<---$scope.popShows is a declaration and you don't need to declare this variable beforehand.
})

.factory('PopularShows', function($http){
// Might use a resource here that returns a JSON array
  return {
    all: function() {
       return $http.get('YOUR_API_URL');
    },
    get: function(popShowId) {
    // Simple index lookup
      return popShows[popShowId];
    }
  }
});

<ion-view view-title="Popular">
 <ion-content>
  <ion-list>
   <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="popShow in popShows" type="item-text-wrap">
    <h2>{{popShow.name}}</h2>
    <p>{{popShow.popularity}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-click="remove(popShow)">
      Delete
     </ion-option-button>
    </ion-item>
  </ion-list>    
 </ion-content>
</ion-view>

{{popShow.name}
{{popShow.popularity}

删除

ng repeat“popShow in popShows”将在列表中迭代

结论：

如您所见，“PopularShows”是services.js中的方法名，它是从controllers.js文件调用的。 all（）进行API调用并将其返回给控制器。 然后，控制器声明一个变量（$scope.popShows），该变量在html选项卡popular中使用