Javascript 从AngularJS中的控制器加载数据

我有一个深入的屏幕流程：

Teams
    Team 1
        Player 1
        Player 2
        Player 3
        Player 4
    Team 2
        Player 1
        Player 2
        Player 3
    Team 3
        Player 1

对于每个控制器，我都有自己的控制器：

TeamsCtrl > TeamCtrl > PlayerCtrl

此外，每个团队和球员都有自己的url，Angular使用该url来标识项目：

/teams/1/players/3

现在，当我访问

/teams

url时，它在

TeamsCtrl

中运行一个函数，加载所有数据，我可以转到每个嵌套项并查看所有数据。它很好用

但是，如果我直接转到像

/teams/1

这样的团队url，或者像

/teams/1/players/2

这样的玩家url，该函数不会运行，因为它不存在，也不在

TeamCtrl

中，也不在

PlayerCtrl

中，所以整个数据集现在是空的

---

我觉得每次在球员或球队之间切换时运行抓取功能是不对的。那么，如果我在层次结构中不是从上到下而是任意链接，我如何确保我拥有所有数据呢？

建议创建一个包装数据结构本身的服务，并在服务上包含检索各级所需数据集的方法

创建后，将服务注入每个控制器。另一方面，您只需加载一次数据

服务的角度文档非常好。可能看起来像这样

teamDataService.factory('TeamData', ['$resource', function($resource){

// retrieve data from api call of some sort
var tdr = $resource('/path/to/data/service');

var data;


  teamdata = tdr.get(function(){
     data = teamdata; // assuming your api call returns an array of JSON objects.
  };

return {
   teams: function(){
      return data;
   };

   team: function(id){
        return data[id];
   };

   player: function(teamid, playerid){
       return data[teamid].players[playerid];
   };
}

}]);


myApp.controller('teamController', ['$scope', 'TeamData', function($scope, TeamData){

 var Player1 = TeamData.player(1, 1);


}]);

---

除非您能保证SPA的用户将如何导航，否则您可能需要考虑获取每个控制器中的所有数据。应用程序对状态的依赖性将大大降低，这将确保用户可以任意跳转，应用程序将可靠地处理它。您是否使用$routeProvider？创建一个服务，并在主团队

状态中添加
resolve
，以便无论用户在服务中的哪个位置输入API调用，团队数据都处于该状态。不要将数据存储在服务中，只存储API调用，也可能存储运行数据所需的任何后期处理函数。在需要数据的每个控制器中调用该服务函数。如果您担心在任何地方调用相同数据的效率低下，请缓存它（内置有用于此的工具）。谢谢您的建议。是的，我使用角度服务，我从主控制器运行。似乎我需要进行缓存并在每个控制器中调用它。