web-dev-qa-db-fra.com

AngularJS: service $ http d'usine

J'essaie de comprendre le concept d'usine et de service en angulaire. J'ai le code suivant sous le contrôleur

init();

    function init(){
        $http.post('/services', { 
            type : 'getSource',
            ID    : 'TP001'
        }).
        success(function(data, status) {
            updateData(data);
        }).
        error(function(data, status) {

        });

        console.log(contentVariable);
    };
    function updateData(data){
        console.log(data);
    };

Ce code fonctionne bien. Mais lorsque je déplace le service $ http en usine, je ne suis pas en mesure de renvoyer les données au contrôleur.

studentApp.factory('studentSessionFactory', function($http){
    var factory = {};
    factory.getSessions = function(){
        $http.post('/services', { 
            type : 'getSource',
            ID    : 'TP001'
        }).
        success(function(data, status) {
            return data;
        }).
        error(function(data, status) {

        });
    };
    return factory;
});

studentApp.controller('studentMenu',function($scope, studentSessionFactory){
    $scope.variableName = [];
    init();
    function init(){
        $scope.variableName = studentSessionFactory.getSessions();
        console.log($scope.variableName);
    };
});

Y a-t-il un avantage à utiliser l'usine, puisque $ http fonctionne même sous le contrôleur

javascripthttpangularjs
39
de-bugged

Le but de déplacer votre service studentSessions hors de votre contrôleur est de séparer les problèmes. Le travail de votre service est de savoir comment parler avec le serveur et le travail du contrôleur est de traduire entre les données de vue et les données du serveur.

Mais vous confondez vos gestionnaires asynchrones et ce qui retourne quoi. Le contrôleur doit toujours dire au service ce qu'il doit faire lorsque les données sont reçues plus tard ...

studentApp.factory('studentSession', function($http){
    return {
        getSessions: function() {
            return $http.post('/services', { 
                type : 'getSource',
                ID    : 'TP001'
            });
        }
    };
});

studentApp.controller('studentMenu',function($scope, studentSession){
    $scope.variableName = [];

    var handleSuccess = function(data, status) {
        $scope.variableName = data;
        console.log($scope.variableName);
    };

    studentSession.getSessions().success(handleSuccess);
});
91
Brian Genisio

La première réponse est excellente, mais vous pouvez peut-être comprendre ceci:

studentApp.factory('studentSessionFactory', function($http){
    var factory = {};

    factory.getSessions = function(){
        return $http.post('/services', {type :'getSource',ID :'TP001'});
    };

    return factory;
});

Ensuite:

studentApp.controller('studentMenu',function($scope, studentSessionFactory){
      $scope.variableName = [];

      init();

      function init(){
          studentSessionFactory.getSessions().success(function(data, status){
              $scope.variableName = data;
          });
          console.log($scope.variableName);
     };
 });
10
Robert LUgo