角度循环依赖解决方法答案

【问题标题】：angular circular dependency work-around角度循环依赖解决方法
【发布时间】：2016-02-04 22:59:06
【问题描述】：

小提琴：https://jsfiddle.net/ahmadabdul3/L3eeeh6n/

我正在构建一个应用程序。这个应用程序从一些我可以添加、删除的静态数据开始。我遇到的问题（循环依赖）来自这个初始静态数据。这是场景：

我有 2 项服务（水果、篮子）。每个水果只能属于一个篮子，但每个篮子可以装很多水果。这两个服务（如下）相互依赖：

function fruitService() {}
function basketService() {}

它们相互依赖的原因是因为我拥有的初始静态数据：

function fruitService(basketService) {
  var data = [
   {
     id: 0,
     name: 'apple',
     basket: function() { return basketService.getById(this.refs.basket); },
     refs: {
       basket: 0
     }
   }
  ];
}

如您所见，我有一个函数basket，它返回一个篮子项目，这样我就可以从水果对象中动态检索篮子对象。

购物篮服务类似：

function basketService(fruitService) {
  var data = [
   {
     id: 0,
     name: 'basket1',
     fruits: function() { return fruitService.getByIdList(this.refs.fruits); },
     refs: {
       fruits: [0, ...]
     }
   }
  ];
}

与fruitService 相同，我有一个fruits 函数，可以在我请求水果对象时为我提供它们。我尝试了不同的方法组合来尝试分解实际的静态数据和服务来克服这种循环依赖，但它没有发生。

如何在没有这种循环依赖的情况下构建它

【问题讨论】：

标签： angularjs

【解决方案1】：

让其中一项服务使用 $injector 并在运行时查找该服务

var injectedService = $injector.get('servicenamehere');

您需要将 $injector 添加到您的服务参数中才能正常工作（以防万一有任何问题）

【讨论】：

我不喜欢这个答案。是的，它解决了角度误差。但循环依赖依然存在。
有时循环依赖是必要的。由于我们都不知道问题的全部程度，因此我们都无法评论解决方案的适当性。
它仍然告诉我存在循环依赖：jsfiddle.net/ahmadabdul3/L3eeeh6n/1
你必须移除注入到函数fruitService(basketService)的依赖项
我做了，看看我发布的小提琴链接

【解决方案2】：

您不需要 2 项服务。我觉得一个就够了。

function basketService() {
  var data = [
   {
     id: 0,
     name: 'apple',
     basketName: 'basket1'
   },
  ];

  var service = {
    getFruitById: getFruitById,
    getBasketById: getBasketById
  };

  function getFruitById(fruitId){
    // return one fruit here
  }

  function getBasketById(basketId){
    // return your basket with a list of fruits
  }
}

【讨论】：

我想保持代码的模块化和可维护性。我可能没有在问题中提到这一点，但这个应用程序会增长。随着函数数量的增加，这个文件会变得非常大。如果我将来需要添加更多服务怎么办。这解决了问题，但对可维护性并不理想
就可维护性而言，您在两个服务中都有重复数据这一事实比单独的服务更糟糕。我会更新我的答案，保持 2 个服务和 1 个不变。
重复数据是什么意思？没有重复数据
@AbdulAhmad 对不起，我看错了。我虽然你的篮子里有一个水果 ID 列表
我的篮子确实包含水果 id 的列表，它就像 sql 表中的外键。这样，如果我不需要它，我就不会加载实际的水果，只是对它的引用。如果我需要它，我只需调用“fruits”函数，它就会返回篮子里的水果。它就像一个关系数据库

【解决方案3】：

另一种选择是使用常量来存储您的数据。

angular.module('yourApp').Constant("fruitAndBasketConstant", {
    baskets : [{
        id : 0,
        fruits : [
            {
               // some info
            },
            {
               // some info
            }
        ]
     }]
});

并创建一个服务来查询您的常量。

angular.module("yourApp").factory("FruitService"["fruitAndBasketConstant", function(fruitAndBasketConstant){

    var service = {
        getFruitById: getFruitById
    };

    return service;


    function getFruitById(fruitId){
        // loop through fruitAndBasketConstant.baskets

        // and return the fruit you want
    }

}]);

对你的 basketService 做同样的事情。

【讨论】：