Angular 1.4应用中多工厂调用与数据合并的实现位置咨询

Great question! Let’s break this down based on Angular 1.4 best practices—keeping your code organized and maintainable is key here.

The Short Answer #

You should create a new dedicated Factory/Service to handle the sequential API calls and data merging. Controllers are not the right place for this kind of business logic.

Why Not Put This in the Controller? #

Controllers in Angular are meant to be "thin"—their job is to connect your view to your data, handle user interactions, and manage the scope. If you stuff sequential API logic into a controller:

• Your controller will quickly become bloated and hard to read, especially as your app grows.
• You can’t reuse this logic in other controllers if you need to later.
• Testing becomes harder, since you’ll have to mock more dependencies and untangle logic tied to the scope.

Why a New Service/Factory is Better #

Creating a separate service to wrap this flow follows the single responsibility principle:

• Your existing factories stay focused on their own API calls (Factory1 handles its endpoint, Factory2 handles its own).
• The new service’s only job is to coordinate the two calls, merge the data, and return the combined result.
• This logic becomes reusable across any controller, directive, or other service in your app.
• Testing is simpler: you can mock Factory1 and Factory2’s API responses to test the merging logic in isolation.

Example Implementation #

Let’s walk through some code to make this concrete.

First, your existing factories (unchanged):

angular.module('myApp').factory('Factory1', function($http) {
  return {
    getInitialData: function() {
      return $http.get('/api/initial-data');
    }
  };
});

angular.module('myApp').factory('Factory2', function($http) {
  return {
    getExtraData: function(initialDataId) {
      return $http.get('/api/extra-data/' + initialDataId);
    }
  };
});

Now, the new service to handle the sequence and merging:

angular.module('myApp').factory('DataCombiner', function(Factory1, Factory2, $q) {
  return {
    getCombinedData: function() {
      // First get initial data from Factory1
      return Factory1.getInitialData()
        .then(function(initialResp) {
          const initialData = initialResp.data;
          // Use the initial data to call Factory2's API
          return Factory2.getExtraData(initialData.id)
            .then(function(extraResp) {
              const extraData = extraResp.data;
              // Merge the two datasets (adjust this to fit your data structure)
              return Object.assign({}, initialData, extraData);
            });
        })
        .catch(function(error) {
          // Centralize error handling here (log, format error, etc.)
          console.error('Failed to fetch combined data:', error);
          // Pass the error up to the caller to handle UI feedback
          return $q.reject(error);
        });
    }
  };
});

Finally, your controller stays clean and focused on the view:

angular.module('myApp').controller('MyController', function($scope, DataCombiner) {
  // Fetch combined data when the controller loads
  DataCombiner.getCombinedData()
    .then(function(combinedData) {
      $scope.data = combinedData;
    })
    .catch(function() {
      $scope.error = 'Oops, we couldn’t load your data. Please try again.';
    });
});

Edge Case: When Might a Controller Be Okay? #

If this sequential logic is extremely simple and you’re 100% sure it will never be reused anywhere else in your app, you could put it in the controller as a temporary solution. But even then, moving it to a service is better for future-proofing—requirements change faster than you think!

内容的提问来源于stack exchange，提问作者user3358152