Angular中如何通过工厂获取并返回JSON数据供多控制器使用

没问题，我来帮你把这段数据获取的逻辑抽离到工厂里，这样就能轻松把神祇数据（deityData）提供给其他Angular控制器使用啦！

第一步：创建数据工厂 #

我们先创建一个专门的工厂，负责发起HTTP请求获取JSON数据，还能帮你预处理数据（比如你原来的for循环逻辑），最后把处理好的神祇数据返回出去。工厂是Angular里的单例服务，意味着它只会请求一次数据，之后会缓存结果，避免重复请求哦。

app.factory('DeityDataFactory', function($http) {
  // 缓存数据，避免重复发起HTTP请求
  var cachedDeitys = null;

  return {
    getDeitys: function() {
      // 如果已有缓存数据，直接返回
      if (cachedDeitys) {
        return Promise.resolve(cachedDeitys);
      }

      // 发起请求获取JSON文件
      return $http.get("./data/deitys/data.json")
        .then(function(response) {
          // 提取原始数据中的deitys数组
          cachedDeitys = response.data.deitys;

          // 这里放入你原来的for循环逻辑，做数据预处理
          for(var i = 0; i < cachedDeitys.length; i++){
            // 比如处理每个神祇的属性，示例：cachedDeitys[i].formattedName = cachedDeitys[i].name.toUpperCase();
          }

          // 返回处理好的神祇数据
          return cachedDeitys;
        })
        .catch(function(error) {
          // 处理请求失败的情况
          console.error('获取神祇数据失败:', error);
          throw error;
        });
    }
  };
});

第二步：在控制器中使用工厂 #

现在你可以在任何需要神祇数据的控制器里注入这个工厂，调用getDeitys()方法获取数据啦：

// 改造后的原dataContainer控制器
app.controller("dataContainer", function($scope, DeityDataFactory){
  DeityDataFactory.getDeitys()
    .then(function(deityData) {
      // 把获取到的神祇数据赋值给$scope，供视图使用
      $scope.myData = deityData;
      // 控制器专属的业务逻辑也可以在这里写
    });
});

// 其他需要使用数据的控制器示例
app.controller("DeityDetailController", function($scope, DeityDataFactory){
  DeityDataFactory.getDeitys()
    .then(function(deityData) {
      $scope.allDeitys = deityData;
      // 在这里处理详情页的逻辑
    });
});

为什么这么做？ #

• 复用性：所有需要神祇数据的控制器都能调用同一个工厂方法，不用重复编写HTTP请求代码。
• 性能优化：工厂里的缓存机制会保留第一次请求的结果，后续调用不会再发起网络请求。
• 代码解耦：数据获取和预处理逻辑集中在工厂，控制器只负责视图相关逻辑，代码结构更清晰。

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