javascript - Angular JS数据响应未定义

Question

我是 Angular JS 的新手，正在尝试使用 JSON 数据调用 Rest API。当我运行 HTTP-server 时，没有取回我的响应数据。

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

这里的问题很少。

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>

Answer 2

你可以在服务中试试这个

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

并用作

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