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

Question

我已经设置了一个带有 ngView 指令的小 HTML 页面，在调用 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 脚本如下所示：

controllers.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();
});

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

控制器工作概览，它是播放器控制器，我似乎收到了错误消息。

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}
    });

}])

为什么我们这样使用urlplayer: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 注入我们的决心。然后我们获取 playerId 参数并将其传递给 Templated 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('PlayerListCtrl', ['$scope', 'list', function ($scope, list) {
  $scope.list = list;
}])
.controller('PlayerCtrl', ['$scope', 'player', function ($scope, player) {
  $scope.player = player;
}])

检查一下here

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

Creating Dynamic views based on ngRoute and a Restlike API

javascript

angularjs

angular-routing