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

Started using ionic today and ran into a small bump. The services.js file has a comment // Might use a resource here that returns a JSON array

今天开始使用离子并遇到一个小凹凸。 services.js文件有一个注释//可能在这里使用一个返回JSON数组的资源

I want to make an ajax call to an API but I don't know how do declace a custom resource in that services.js file. I will receive a JSON array from that call and will work with the list thre on.

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

Question: How do I declare a custom variable as a list which makes an ajax call to a third pary API?

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

The chats list is never populated. How do a correctly make an ajax call inside the ionic services.js file.

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

Thank you!

2 个解决方案

#1

You can do something like this:

你可以这样做:

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

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

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

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

And in the controller:

在控制器中:

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

You can check $http in the docs

您可以在文档中查看$ http

#2

Thanks Mati Tucci. I will post a more detailed awnser here.

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

Steps:

Declare what controller you want to use in the view inside the app.js file. In my case:

在app.js文件中的视图中声明要使用的控制器。就我而言:

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

Declare a controller in the controllers.js file. In my case:

在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.
})

Now you need to declare the method PopularShows.all() in your services.js file. In ionic you can do that with .factory('YOUR_METHOD_NAME', function($http){...}). $http means your method uses http request. In my case:

现在,您需要在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];
    }
  }
});
```

Handle the popShows variable which is a JSON list in the html file. In my case:

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

The ng-repeat"popShow in popShows" will iterate over the list.

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

Conclusion:

As you can see 'PopularShows' is the method name in the services.js which is called from the controllers.js file. PopularShows.all() makes the API call and returns it to controller. The controller then declares a variable ($scope.popShows) which is used in the html tab-popular.

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

#1