javascript - 基于 ngRoute 和 ReSTLike API 创建动态 View

Question

我已经设置了一个小型 HTML 页面，其中包含 ngView 指令，在调用 ReSTLike 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="">

我的 Angular 脚本如下所示:

Controller .js:

var dashboardControllers = angular.module('dashboardControl',['ngRoute','dashboardFactory']);
dashboardApp.controller('PlayersController', function ($scope, $routeParams, Player) {
    $scope.players = Player.findAll();
});
dashboardApp.controller('PlayerDetailsController', function ($scope, $routeParams, Player) {
    $scope.playerId = $routeParams.playerId;
    $scope.player = Player.get();
});
dashboardApp.controller('OverviewController', function ($scope, $routeParams, Overview) {
    $scope.overview = Overview.query();
});

工厂.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}
        });
    }]);

概述 Controller 工作，它是我似乎收到错误消息的播放器 Controller 。

Answer 1

我创建了working example here 。

NOTE: It uses UI-Router instead of ngRoute... which I guess is really the right way... but the concept is exactly the same.

首先我们定义资源“player”:

.factory('player', ['$resource', function($resource){

   return $resource('player:playerId.json', {}, {
     findAll: {method: 'GET', isArray: true},
     get: {method: 'GET', isArray: false}
    });

}]) 

为什么我们使用这样的网址player:playerId.json？只因为那个笨蛋。我们从 parametrized URL template 中获利。 ...这允许在 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 注入(inject)到我们的解析中。然后，我们获取 playerId 参数并将其传递到模板化 URL - 因此它将生成 player1.json、player2.json，...

In real life it would url like this 'server/api/resource/:id' - but the logic will be the same.

这些是消耗 Controller :

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

检查一下here