私はちょうど角を描いて冒険を始めました。私は、コントローラから取得したjsonのコンテンツを提示するはずの非常に簡単なアプリケーションを持っています(Spring Bootはappを作成した)。 Viewは人のリストを表示することになっています。これはコントローラー内で提供されているjsonと同じように動作しますが、$ http.getに切り替えるとリストはレンダリングされません。要素が角にレンダリングされていない
コントローラがデータを要求されている(ログがあり、フロントエンド側でデバッグを行った)ことがわかっています。これはちょっと空のビューで、少し問題があります。私はどういうわけか$scope
と結びついているという気持ちがありますが、私は何が間違っているのかを理解するには新鮮です。ここで
は私のコードです:
のindex.html:
<!DOCTYPE html>
<html lang="en" ng-app="peoplePopulator">
<head>
<link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.min.css"/>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="app/myApp.js"></script>
<script src="app/peoplePopulator.js"></script>
</head>
<body>
<people-consumer></people-consumer>
</body>
</html>
myApp.js:
var peoplePopulator = angular.module('peoplePopulator', []);
peoplePopulator.js:
angular.module('peoplePopulator').component('peopleConsumer', {
template:
'<ul>' +
'<li ng-repeat="man in $ctrl.people">' +
'<p>This is the value for id: {{man.id}}</p>' +
'<p>This is the value for name: {{man.name}}</p>' +
'<p>This is the value for surname: {{man.surname}}</p>' +
'<p>This is the value for age: {{man.age}}</p>' +
'<p>This is the value for sex: {{man.sex}}</p>' +
'</li>' +
'</ul>',
controller: function PeopleController($scope, $http) {
$http.get('http://localhost:8080/getAllPeople').
then(function(response) {
$scope.people = response.data;
});
}
});
ログ:
Added: PersonDto{id=null, name='ran1.6077897002879162E308', surname='dom389401569', age=423647022, sex='F'}
Added: PersonDto{id=null, name='ran1.7927508063734304E308', surname='dom139179403', age=135916746, sex='F'}
Added: PersonDto{id=null, name='ran5.491516947272879E307', surname='dom601187307', age=1882764612, sex='F'}
Fetching records from all over the world
HHH000397: Using ASTQueryTranslatorFactory
Fetching records from all over the world <- logger in the getAllPeople controller