Read and display server request


#1

I have problem with how services and controller works.

I put this code in factory services :

var result = [];
return {
    getdata: function(){
      $http.get('my_url.php')
        .success(function (data, status, headers, config) 
          {
              return result;
          })
        .error(function (data, status, headers, config) 
          {
            //error statement
          });
    }
  }

The server return correct value, and controller has called that function, but looks like it never sent or received in controller.

But when i put that in controller directly, it works.

What is the best way to get server data in Ionic?


#2

Try this instead:

ExampleService.js

     angular
        .module('services.example', ['$scope', '$http'])
        .factory('ExampleService', function($scope, $http) {
            var result = [];

            return {
                 getData: function() {
                     return $http.get('YOUR_URL');
                 }
            };  
        });

ExampleController.js

   angular
       .module('controllers.example', ['$scope', 'ExampleService'])
       .controller('ExampleCtrl', function($scope, ExampleService) {
           ExampleService
               .getData()
               .success(function(data, status, headers, config) {

               })
               .error(function(data, status, headers, config) {

               });
       });

#3

no need to pass the request to the controller…
here it is nice to use angularJS promises ;).

The promise service can be loaded with $q.

$http(requestObject).then(function (data) {}, function(data) {});

First function will be executed if request returns with 200 second function in any error case.
If you building an own promise around it -> return the promise and you’ve got it.

An example:
Service

angular
    .module('services.example')
    .factory('ExampleService', function($scope, $http, $q) {
        var result = [];

        return {
             getData: function() {
                 // create new promise/queue
                 var promise = $q.defer();
                 $http.get('YOUR_URL').then(function (repsonse) {
                    // success
                    promise.resolve(response);
                 }, function (response) {
                    // fail
                    promise.reject(response);
                 });

                 // return promise
                 return promise.promise;
             }
        };  
    });

Controller

angular
   .module('controllers.example', ['$scope', 'ExampleService'])
   .controller('ExampleCtrl', function($scope, ExampleService) {
       ExampleService
           .getData().then(function (res) {
               // success
            }, function (res) {
               // error
            });
   });

Promises are nice to put asynchronous code in a synchronous context ;).


#4

That’s an alternative too.


#5

It is a very nice solution if you have a generic request service, that handles every request with a generic error handler.
So you have write this code 1 time and not for each request you send ;).

And you can build up arrays of request -> and promise all together with $q.all(ArrayOfPromises) -> so you can send different request but only get success or error if all have finished.

Greetz bengtler.


#6

Thanks for your guide, guys :smile:
It is really new stuff for me. I’ll try to implement it to my code.

Updated:
it works well!! Thanks guys!