Question

在这个圈子里旋转，并希望得到任何帮助。尝试将数据从服务中的api提取到我的控制器中，并在ng-repeat中重复返回的数据。

尝试过混合结果的方法。

方法1：

厂

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';
});

我的控制台返回“Provider'getServiceData'必须从$ get factory方法返回一个值。”所以我的承诺不是返回我可以使用的获取值，而是不确定如何重构。

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

方法2：

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();
             }
           }

    })

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

Answer 1

您不需要在工厂中解决承诺，因为您在控制器中重新启动它。只需在工厂中返回http并在控制器中解析。

另外，返回工厂中的端点对象

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

})

Answer 2

应该是这样的。

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

Answer 3

方法1应该是这样的：

它应该返回getPosts对象供控制器理解，因此错误“Provider'getServiceData'必须从$ get factory方法返回一个值。”会得到解决。

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 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

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

4 个答案: