0
私は、ユーザーの情報を取得しているAngularJsアプリケーションを構築するためのチュートリアルに取り組んでいます。私は、アプリケーションを実行していると、出力が表示されません。出力がREST APIのために出力されないAngular
私のindex.html
<!DOCTYPE html>
<html data-ng-app="myContactApp" >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<script src="appConfig.service.js"></script>
<script src="appname.service.js"></script>
<script src="contact.controller.js"></script>
<script src="contactdata.service.js"></script>
<title>My Contact Application</title>
</head>
<body>
<main>
<div class='container' ng-controller="contactController as ctrl">
<div class='row'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="con in ctrl.contactArr" data-ng-click="ctrl.selectUser($index)">
<span>{{con.name.first+ " "+con.name.last}}</span>
</li>
</ul>
</div>
<div class='row'>
<div class="media">
<div class="media-left">
<a href="#">
<img data-ng-src="{{ctrl.selectedUser.picture.medium}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ctrl.selectedUser.name.first+ " "+ctrl.selectedUser.name.last}}</h4>
<div>
<p>
<h6>Location</h6>
</p>
<p>
{{ctrl.selectedUser.location.street+" "+ctrl.selectedUser.location.city+" "+ctrl.selectedUser.location.state+" "+ctrl.selectedUser.location.postcode}}
</div>
<div>
<p>
<h6>Phone</h6>
</p>
<p>{{ctrl.selectedUser.phone}}</p>
</div>
<div>
<p>
<h6>email</h6>
</p>
<p>
{{ctrl.selectedUser.email}}</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
マイapp.js
var app=angular.module("myContactApp",[]);
マイappconfig.service.js
(function(){
var app=angular.module("myContactApp");
app.service("AppDataServiceSVC",function(appNameSVC){
this.Name=appNameSVC;
this.author='Bhaskar';
this.buildDate=new Date().toDateString();
});
})();
マイappname.service.jsファイル： -
(function(){
var app=angular.module("myContactApp");
app.value("AppNameSVC","My New Contact List");
})();
マイcontact.controller.jsが
(function(){
var app=angular.module("myContactApp");
app.controller("contactController",contactCtrl);
function contactCtrl(ContactDataSVC){
var self=this;
ContactDataSVC.getContacts().then(function(data){
self.contacts=data;
})
this.selectUser=function(index){
this.selectedUser = this.contactArr[index];
}
}
})();
マイcontactdata.service.js
(function(){
var app=angular.module("myContactApp");
app.service("ContactDataSVC",function($http){
var self=this;
self.getContacts=function(){
var response1=$http.get('http://localhost:3000/contacts');
var response2=response1.then(function(response){
return response.data;
});
return response2;
}
});
})();
ファイル私は、JSON-サーバー上で実行されているとRESTのAPIとしてそれを使用していますdb.jsonを作成しました。連絡先の詳細を表示する必要がありますが、ブラウザには何も表示されません。私はどこで間違えたのか分かりません。お使いのコントローラで
'curl -X GET http：// localhost：3000/contacts'あなたはどのようなレスポンスを得ますか？ –
あなたは 'ContactController'に' ContactDataSvc'を注入していません。また、あなたのテンプレートでアクセスしているスコープ変数は 'contactContr'の中で' contactArr'ですが、サービスから取得したときに 'contacts'を設定しています。 –
ありがとう私はちょうどこれが問題であることを発見しました。 –