私のAngularファイルは次のようになります:
angular.module('myApp', [
'ngResource',
'ngRoute',
])
// Creating our routes
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/professors', {
controller : 'ProfessorListController',
templateUrl : 'static/templates/partials/professor_list.html'
})
.when('/professors/:professor_id', {
controller : 'ProfessorDetailController',
templateUrl : 'static/templates/partials/professor_detail.html'
})
.otherwise({ redirectTo : '/' });
}
])
// Getting all the professors from the API
.factory('Professor', [
'$resource', function($resource) {
return $resource('/api/professors/:id', {
id: '@id'
});
}
])
// Creating a controller containing all the professors
.controller('ProfessorListController', [
'$scope', 'Professor', function($scope, Professor) {
return $scope.professor_list = Professor.query();
}
])
// Creating a controller containing a particular professor
.controller('ProfessorDetailController', [
'$scope', '$routeParams', 'Professor',
function($scope, $routeParams, Professor) {
return $scope.professor_detail = Professor.query({
id: $routeParams.professor_id
});
}
]);
教授リストビューは機能し、データを適切にレンダリングしています。しかし、私が言いに行くとき
/#/ Professors / 2
何もない空のページです。/ api / professors / 2にアクセスすると、JSONとしてid = 2の教授の詳細が表示されるため、APIは機能しているようです。
私のテンプレートprofessor_detail.htmlは次のようになります。
<div>
<div class="text-center" ng-repeat="prof in professor_detail">
<h3>{{prof.name}}</h3>
<p>{{prof.university}}</p>
<p>{{prof.department}}</p>
<p>{{prof.overall}}</p>
<br />
</div>
</div>
また、不思議に思うかもしれませんが、アプリがテンプレートを検索し(Httpステータス200)、APIからデータを取得している(GET HTTPステータス200)ことを端末から確認できます。だから私は何が間違っているのですか?
どんな助けでも大歓迎です!
編集:了解しました。#/ Professors / 2に移動すると、ブラウザのエラーコンソールに次のエラーが表示されます。
Error: [$resource:badcfg] http://errors.angularjs.org/1.5.0/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprofessors%2F2
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:6:421
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js:11:51
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:126:506
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:47
$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:138:145
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:348
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:94:145
t@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:98:261
onload@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:99:298
これが何であるか考えていますか?
クエリ関数が戻り値として配列を期待するので、Professor.query
代わりにProfessor.get
を使用する必要があります。
.query
教授のリスト(配列)が返されるため、最初のリクエストで機能しますが、教授オブジェクトを1つだけ返すと、この関数は失敗します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加