将数据从服务返回到控制器

Question

一直在兜圈子，希望得到任何帮助。尝试将服务中的 api 中的数据提取到我的控制器中，并在 ng-repeat 中重复 returned 数据。

尝试过结果喜忧参半的方法。

方法一：

工厂

app.factory('getServiceData',function($http){
var getPosts = function(){
  return $http.get("http://localhost:3000/posts")
    .then(function(response){
      console.log(response.data)
      return response.data
    })
}

控制器

app.controller('myCtrl',['getServiceData','$scope','$http', 
function($scope,$http,getServiceData){

getServiceData.getPosts().then(function(data){
  $scope.posts = data;
}).catch(function(){
  $scope.error ='unable to get posts';
});

我的控制台 returns "Provider 'getServiceData' must return a value from $get factory method." 所以我的承诺不是 return 获取我可以使用的值，但不确定如何重构。

方法 2 在 ngRoutes 上使用 resolve 在用户导航到页面之前提取 api 数据

方法二：

app.factory('getServiceData',function($http){

return {
  var getPosts = function(){
  return $http.get("http://localhost:3000/posts")
 .then(function(response){
  console.log(response.data)

return response.data
  })
 }
};

配置：

.when('/home.html', {
        templateUrl: 'app/home.html',
        controller: 'myCtrl',
        resolve: {
         'ServiceData': function(getServiceData){
           return getServiceData.getPosts();
             }
           }

    })

第二种方法将 return 来自我的 api 的数据在 console.log 响应中，但我无法在我的控制器中显示它。

Answer 1

方法一应该是这样的：

控制器应该return getPosts 对象可以理解，因此错误 "Provider 'getServiceData' must return a value from $get factory method." 将得到解决。

app.factory('getServiceData',function($http) {
    var getServiceDataFactory = {};
    var _getPosts = function() {
        return $http.get("http://localhost:3000/posts")
                    .then(function(response){
                        console.log(response.data);
                        return response.data;
                    });
    }

    getServiceDataFactory.getPosts = _getPosts;
    return getServiceDataFactory;
});

Answer 2

您不需要在工厂中解决承诺，因为您正在控制器中重新解决它。只需 return 工厂中的 http 并在控制器中解析。

此外，return 工厂中的端点对象

app.factory('getServiceData',function($http){
    var getPosts = function(){
      return $http.get("http://localhost:3000/posts")
    }
    return {
        getPosts : getPosts 
    }

})

Answer 3

应该是这样的

app.factory('getServiceData', function($http){
  return {
    getPosts : function() {
        return $http.get("http://localhost:3000/posts")
       }
     };
});

Answer 4

重构方法 #1
第一个问题是您的 service 及其编码方式。
第二个问题是你的控制器依赖注入的顺序。

//Service
app.factory('getServiceData', getServiceData);
getServiceData.$inject = ['$http'];
function getServiceData($http) {
  return {
    getPosts: () => $http.get('http://localhost:3000/posts')
  }
});

// Controller
app.controller('myCtr', myCtrl);
myCtrl.$inject = ['getServiceData', '$scope'];
function myCtrl(getServiceData,$scope) {
  getServiceData.getPosts().then(function(data){
    $scope.posts = data;
  }).catch(function(){
    $scope.error ='unable to get posts';
  });
}

有用的参考资料：

AngularJS: Factory vs Service vs Provider

Dependency Injection

将数据从服务返回到控制器

Returning data from Service to controller

angularjs

angularjs-ng-repeat

angular-promise