我已经设置了一个小型 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 。
最佳答案
我创建了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
关于javascript - 基于 ngRoute 和 ReSTLike API 创建动态 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28008275/