Javascript 基于ngRoute和Restlike API创建动态视图

我已经设置了一个小的HTML页面，其中包含一个ngView指令，在调用类似REST的API后，当单击任何导航链接时，该指令都会更新。这一点似乎有效，尤其是在请求中没有要使用的参数时

一旦我尝试添加参数，它就会失败，并出现以下错误：

 TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:8080/dashboard/js/factorys.js:11:16)
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3965:17)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3807:37
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3929:39)
at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3956:13)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3976:23)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:7315:28)
at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.js:907:26)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:6752:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:6146:13) <div class="container ng-scope" ng-view="">

factories.js：

var dashboardFactories = angular.module('dashboardFactory',['ngResource']);
dashboardFactories.factory("Overview", ['$resource',
    function ($resource) {
        return $resource('webresources/overview/', {}, {
            query: {method: 'GET', isArray: false}
        });
    }]);
dashboardFactories.factory("Player", ['$resource',
    function ($scope, $resource) {
        return $resource('webresources/player/:playerId', {}, {
            findAll: {method: 'GET', isArray: true},
            get: {method: 'GET', params: {playerId: $scope.playerId}, isArray: false}
        });
    }]);

概览控制器工作，它是我创建的播放器控制器，似乎有错误消息

注意：它使用UI路由器而不是ngRoute。。。我想这是正确的方法。。。但概念完全相同

首先，我们将定义resoruce“玩家”：

为什么我们使用这样的url

播放器：playerId.json

？就因为那次抢劫。我们在这里从。。。它允许在plunker中为列表设置

player.json

，为每个玩家设置

player+playerId+.json

国家定义：

// States
$stateProvider
  .state('list', {
      url: "/list",
      templateUrl: 'tpl.list.html',
      controller: 'PlayerListCtrl', 
      resolve : { 
        list : ['player', function(player){return player.findAll();}]
      }
  })
  .state('player', { 
      url: "/player/:playerId",
      templateUrl: 'tpl.player.html', 
      controller: 'PlayerCtrl', 
      resolve : { 
        player : ['player', '$stateParams'
        , function(player, $stateParams){
          return player.get({playerId: $stateParams.playerId});
        }]
      }
  })

最重要的部分是：

player : ['player', '$stateParams'
, function(player, $stateParams){
  return player.get({playerId: $stateParams.playerId});
}]

因为我们让angular将

$stateParams

注入到解析中。然后，我们获取

playerId

参数并将其传递到模板化URL——因此它将生成

player1.json

，

player2.json

在现实生活中，它的url类似于“server/api/resource/：id”-但逻辑是相同的

这些是消费控制器：

.controller('PlayerListCtrl', ['$scope', 'list', function ($scope, list) {
  $scope.list = list;
}])
.controller('PlayerCtrl', ['$scope', 'player', function ($scope, player) {
  $scope.player = player;
}])

---

选中它

您不能通过IoC将$scope注入工厂。还有-您的定义

dashboardFactories.factory（“Player”，

是错误的-数组中的一个param$资源是无效的，而不是第一个参数$scope

函数（$scope，$resource）

如果我不能将scope注入工厂，我如何才能获得playerId变量。我确实使用UI Router，几乎忘记了如何使用ngroute…对此表示抱歉。但我在回答中给出的示例和解释应该很清楚，并且可以很容易地重写到旧的ngroute中…顺便说一句-检查UI Router；）我不知道还有其他的方法可以做到这一点，就是跟随一个教程/根据我的要求进行调整，但我被困在这里。我现在来看看UI路由器，谢谢。UI路由器只是一个状态机工具。这只是更换了ngRoute。。。但是解决方案，控制器，$resource。。。一切都是一样的。。。我只是用了不同的“背景”。。。因为我曾经用过它。。。你知道我的意思吗。。。我建议。。。检查一下。但要解决您当前的问题，这不是必须的。我只是用它来让你的解决方案更简单。。。

player : ['player', '$stateParams'
, function(player, $stateParams){
  return player.get({playerId: $stateParams.playerId});
}]

.controller('PlayerListCtrl', ['$scope', 'list', function ($scope, list) {
  $scope.list = list;
}])
.controller('PlayerCtrl', ['$scope', 'player', function ($scope, player) {
  $scope.player = player;
}])