如何在Angularjs单控制器中添加多个ajax请求

Question

如何在 angular.js 的单个控制器中拥有多个 ajax 响应数据？

示例代码（控制器）：

第一个 API：（从服务器获取 dashlet 详细信息）

var Api = $resource('/portal/api/notificationdashlet/'+id);
    $scope.tableParams = new ngTableParams({
       page: 1,            // show first page
       count: 10,          // count per page
       sorting: {
         name: 'asc'     // initial sorting
       }
    }, {
    total: 0,           // length of data
    getData: function($defer, params) {
        // ajax request to api
        Api.get(params.url(), function(data) {
            $timeout(function() {
                //params.total(data.total);
                $defer.resolve(data.result);
                console.log(data.result);
            }, 10);
        });
    }
});

第二个 API：（从服务器获取 DOB 详细信息）

var Api1 = $resource('/portal/api/notificationdob/');
    $scope.tableParams = new ngTableParams({
       page: 1,            // show first page
       count: 10,          // count per page
       sorting: {
         name: 'asc'     // initial sorting
       }
    }, {
    total: 0,           // length of data
    getData: function($defer, params) {
        // ajax request to api
        Api1.get(params.url(), function(data) {
            $timeout(function() {
                //params.total(data.total);
                $defer.resolve(data.result);
                console.log(data.result);
            }, 10);
        });
    }
});

查看（HTML）：

第一个 API 表：

<table ng-table="tableParams" show-filter="true" class="table">
    <thead>
        <tr>
        <td>Title<td>
        <td>Name<td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="val in $data ">
            <td>{{val.t}}</td>
            <td>{{val.n}}</td>
        </tr>
    <tbody>
</table>

第二个 API 表：

<table ng-table="tableParams" show-filter="true" class="table">
    <thead>
        <tr>
        <td>Date<td>
        <td>Desc<td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="details in $data ">
            <td>{{details.d}}</td>
            <td>{{details.des}}</td>
        </tr>
    <tbody>
</table>

Answer 1

您通常只需发出两个单独的请求，在触发结果回调时填充 $scope 对象。视图将自动刷新。如果您不希望在所有 ajax 请求完成之前刷新视图，则将一些 Promise 与 $q.all 链接在一起。有关详细信息，请参阅https://docs.angularjs.org/api/ng/service/$q。还有其他方法可以做到这一点，但 Angular 鼓励使用其内置的 $q 库。这是一个示例（更改 ajaxStuff 服务的内容以满足您的需要；这里没有可使用的服务器，因此我使用 setTimeout 模拟了服务器调用）：

'use strict';

/* App Module */

angular.module('testApp', [])
 .controller('test-controller', function($scope, $q, ajaxStuff){
   var promise1 = ajaxStuff.getData1();
   var promise2 = ajaxStuff.getData2();
   $q.all([promise1, promise2]).then(function(results){
      $scope.foo = results[0];
      $scope.bar = results[1];
   });
 }).factory('ajaxStuff', function($q){
   return{
     getData1: function(){
       var deferred = $q.defer();
       setTimeout(function(){
            deferred.resolve('foo');
       }, 1000);
       return deferred.promise; 
     },
     getData2: function(){
       var deferred = $q.defer();
        setTimeout(function(){
            deferred.resolve('bar');
       }, 500);
       return deferred.promise;
     }
   };
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="testApp">
    <div ng-controller="test-controller">
      {{foo}}{{bar}}
    </div>
  </div>