Angular JSデータレスポンスが定義されていません

Question

Angular JSの新機能で、JSONデータを使用してRest APIを呼び出そうとしています。私がHTTPサーバを走らせるとき、私の応答データを返さない。

function contacts(contactsdata) { 
    contactsdata.getcontacts().then(function(data) { 
     this.contactsinfo = data; 
    }); 
} 

(function(){ 
    var mod = angular.module('myapp'); 
    mod.controller("contacts", contacts); 
    mod.service("contactsdata", function($http) { 
     this.getcontacts = function(){ 
      var execute1 = $http.get('http://localhost:3000/contacts'); 
      var execute2 = execute1.then(function(response) { 
       return response.data; 
      }) 
      return execute2; 
     } 
    }); 
})(); 

Answer 1

あなたはサービスに

 this.getcontacts = function(){ 
      return $http.get('http://localhost:3000/contacts'); 
     }); 

これを試してみて、いくつかの問題がここにあります

contactsdata.getcontacts().then(function(response){ 
    this.contactsinfo = response.data; 
}); 

Answer 2

として使用することができます。

1. この

   var mod = angular.module('myapp', []);

2. ような角度の初期化中にこの

   mod.controller("contacts", ['$scope', 'contactsdata', contacts]);

3. ようなコントローラにサービスの依存関係を注入する必要が空の配列を渡す必要があります

   返品のようなサービスから約束を返すことができます$http.get... &は、サービスのデータを使用

function contacts($scope, contactsdata) { 
 
    contactsdata.getcontacts(). 
 
    then(function(data) { 
 
    console.log(data) 
 
    }); 
 
} 
 

 

 
(function() { 
 
    var mod = angular.module('myapp', []); 
 
    mod.controller("contacts", ['$scope', 'contactsdata', contacts]); 
 
    mod.service("contactsdata", ['$http', function($http) { 
 
    this.getcontacts = function() { 
 
     return $http.get('https://jsonplaceholder.typicode.com/posts/1') 
 
    } 
 
    }]) 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="contacts"></div> 
 
</div>

1）OPは、他の場所でモジュールを作成してもよく、モジュールゲッター `angular.module（moduleNameの）`