Question

今天开始使用离子并遇到一个小凹凸。 services.js文件有一个注释 // Might use a resource here that returns a JSON array

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

问题：如何将自定义变量声明为对第三个pary 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;
  }
};

永远不会填充聊天列表。如何在ionic services.js文件中正确进行ajax调用。

谢谢！

Answer 1

您可以这样做：

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

您可以在文档中查看$http

Answer 2

感谢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
    }
  }
})

在controllers.js文件中声明一个控制器。就我而言：

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

现在您需要在services.js文件中声明PopularShows.all（）方法。在离子中你可以用.factory（'YOUR_METHOD_NAME'，函数（$ http）{...}）来做到这一点。 $ http表示您的方法使用http请求。就我而言：

.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];
    }
  }
});

处理popShows变量，该变量是html文件中的JSON列表。就我而言：

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

ng-repeat“popShow in popShows”将遍历列表。

<强>结论：

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

在离子services.js文件中调用ajax调用第三方API？

2 个答案: