AngularJS : factory $http service

Question

I am trying to understand the concept of factory and service in Angular. I have the following code under the controller

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

This code works fine. But when i move $http service into factory, i am not able to return data back to controller.

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

Is there any advantage to using factory, since $http works even under controller

Brian Genisio · Accepted Answer · 2013-04-26 10:28:30Z

92

The purpose of moving your studentSessions service out of your controller is to achieve separation of concerns. Your service's job is to know how to talk with the server and the controller's job is to translate between view data and server data.

But you are confusing your asynchronous handlers and what is returning what. The controller still needs to tell the service what to do when the data is received later...

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

edited Apr 26, 2013 at 10:28

answered Apr 26, 2013 at 2:24

Brian Genisio

48.2k17 gold badges129 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

de-bugged Over a year ago

Thanks Brian. Makes sense now. I get a missing } error after property list error. Error persists after closing adding a close paranthesis for return in factory.

de-bugged Over a year ago

Oki fixed the paranthesis part. Now the code is

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

Now got an error stating Error b is not a function. I dont have any function called b. Any suggestion on what triggers this error?

Brian Genisio Over a year ago

Thanks. I missed that brace. As for the "b is not a function", are you using some sort of code minification or uglification?

de-bugged Over a year ago

Im using minified angularjs. will try out changing to normal version. thnx

markstewie Over a year ago

Awesome, thanks for this... exactly the concept I've been trying to get my head around.

|

aldux · Accepted Answer · 2016-07-01 17:34:18Z

10

The first answer is great but maybe you can understand this:

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

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

    return factory;
});

Then:

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

      init();

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

edited Jul 1, 2016 at 17:34

aldux

2,8042 gold badges26 silver badges36 bronze badges

answered Apr 28, 2015 at 11:57

Robert LUgo

3844 silver badges6 bronze badges

1 Comment

SharpC Over a year ago

Looks like a good answer, but .success has now been deprecated it seems stackoverflow.com/questions/33531336/….

Collectives™ on Stack Overflow

AngularJS : factory $http service

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related