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="">

我的角度脚本看起来像这样：

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。

注意：它使用UI-Router而不是ngRoute ...我猜这是正确的方式......但概念完全相同。

首先，我们将定义resoruce＆＃34;播放器＆＃34;：

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

因为我们让角度将$stateParams注入我们的决心。然后我们使用playerId参数并将其传递到模板化网址 - 这样就会生成player1.json，player2.json，...

在现实生活中，它会像这样的网址＆＃39; server / api / resource /：id＆＃39; - 但逻辑是一样的。

这些正在消耗控制器：

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

检查here

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

1 个答案: