Renvoi des données du service au contrôleur

Question

Je tournais en rond à ce sujet et j'apprécierais toute aide. Essayer d'extraire des données d'api en service dans mon contrôleur et répéter les données retournées dans une ng-repeat.

Avoir essayé d'approcher avec des résultats mitigés.

Approche 1:

usine

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

Contrôleur

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

Mes retours console "fournisseur 'getServiceData' doit retourner une valeur de $ obtenir la méthode de l'usine." Donc, ma promesse ne renvoie pas une valeur d'obtenir que je peux utiliser, mais je ne sais pas comment refactoriser.

Approche 2 utilise la détermination des ngRoutes pour tirer les données IPV avant que l'utilisateur accède à la page

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

Config:

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

    }) 

La deuxième approche retournera les données de mon API sur la réponse de console.log mais je suis incapable de l'afficher dans mon contrôleur.

Answer 1

refactorisé votre approche # 1
Le premier problème était votre service et comment il a été codé.
Le deuxième problème était l'ordre d'injection de dépendance de votre contrôleur.

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

références utiles:

AngularJS: Factory vs Service vs Provider

Dependency Injection

Answer 2

Approche 1 devrait ressembler à ceci:

Il doit retourner l'objet getPosts pour le contrôleur de comprendre, d'où l'erreur « fournisseur « getServiceData » doit retourner une valeur de $ obtenir la méthode de l'usine. » serait résolu. Vous n'avez pas besoin de résoudre la promesse dans l'usine puisque vous le resloving dans le contrôleur

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 3

Il suffit de retourner le http en usine et de résoudre dans le contrôleur.

, retournez également les points d'extrémité objet dans l'usine

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

}) 

Answer 4

Il devrait ressembler à cela.

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