ngRoute 및 나머지 API를 기반으로 동적보기 만들기

Question

휴식 API를 호출 한 후 탐색 링크 중 하나를 클릭 할 때 업데이트해야하는 ngView 지시문이있는 작은 HTML 페이지를 설정했습니다. 이 비트는 특히 요청에 사용할 매개 변수가 없을 때 작동합니다.

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

공장 마자 내가 다음 오류로 실패 PARAM를 추가하려고으로

.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.

첫째로 우리는 resoruce "플레이어"를 정의합니다 : 우리는이 player:playerId.json 같은 URL을 사용하는 이유

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

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

}]) 

를? 그냥 멍청이 때문에. 우리는 parametrized URL template에서 여기에서 이익을 얻습니다 ... 플 런커에서 허용하는 목록은 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 매개 변수를 사용하고 템플릿 기반 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 확인