$http in Anjgularjs: Can someone explain the flow

Question

In an $http call, What all things we can pass in the url part, I have a server address, a user name and Password. Can i pass all as a json object?, or we have any other parameter (like url) for this.? Can someone help me in understanding what is happening on a success call.

Specifically, the code I'm struggling with is:

app.factory('myFactory',function(){

var fact = {};
fact.getData = function(a){
    $http({method:'POST',url:'http://100.100.100.100:8080/xx/xx.xx'});
    $http.success(function(reply){a(reply)}
        );
};

return fact;

});

---

See the following code, still I am not getting data from server, at the same time no errors too.

xapp.factory('loginData',function($http,$log){
    var fact = {};

    fact.getData = function(cred,cb){
        return
            $http({
                method:'post',
                url:'xxx.xxx.xxx.xxx:xxxx/xxxxxx',
                data:cred})
            .success(function(data,status,header,config){
                cb(data);
                })
            .error(function(data,status,header,config){
                $log.warn(status);
                });
    };

    return fact;
});


xapp.controller('mainController',function($scope,$log,$http,loginData){
    $scope.user = {uesr:'user',password:'123'};

    loginData.getData($scope.user,function(data){
        $scope.reply = data;
        });
});

In the console log, I get an 'undefined'. If the http url is correct, do u see any issue?

Answer 1

As far as I understand, a parameter is a callback function that is executed when reply from server is received. This kills the purpose of promises that the $q service provides. Also, $http service itself does not have .success callback. It returns a promise object with .success and .error callbacks. Here's how it should be done:

app.factory('myFactory', function() {
  var fact = {};
  fact.getData = function() {
    return $http.get('your/path/to/resource/');
  }
  return fact;
})
.controller('myCtrl', function($scope, myFactory) {
  myFactory.getData().then(function(response){
    //response.data holds your data from server
  }, function(){
    //this fn gets called when error happens
  });
});

Some explanations: myFactory.getData() creates a new http request to the server and returns a promise object which has a method .then(successCallback, errorCallback) . You can provide callbacks to the promise to be executed after request is complete.

You might get confused with my mentioned .then(successCallback, errorCallback) and .success(callback) used in your example. A generic promise that $q provides has .then method, but $http service, upon returning a promise, provides shortcuts .success() and .error() but it's the same thing in the end.

Answer 2

This will solve your problem of sending body.

  app.factory('myFactory', function($http) {
    return{
       getData : function(body) {
        return $http({
          url: 'http://100.100.100.100:8080/xx/xx.xx',
          method: 'POST',
          data:body
        })
      }
   }
 });


 app.controller('myCtrl', function($scope, $location, $http, myFactory){

    var body ={username:uname, password:pass};
    myFactory.getData(body).success(function(data){
       $scope.data=data;
    });
 });