How to use a service with Http request in Angular JS

Question

I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me.

But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service.

I tried to make :

var app = angular.module('ofcservices', []);
app.factory('news', ['$http', function ($http) {
    var news={};

    news.getnews= function () {
        return $http.get('http://int.footballclub.orange.com/ofc/news?offset=0&limit=5');
    };

    return news;
}]);

and the code of the controller :

.controller('news', function($scope, ofcservices) {
    $scope.news = ofcservices.getnews();
})

Everything seems to be right ?

"Everything seems to be right?" — Surely just testing it will tell you that? Do you have some reason to think it isn't right? — Quentin
– Quentin, Commented Jun 22, 2015 at 8:30
$http is async. Just check satpals answer: stackoverflow.com/questions/21293235/… — nofear87
– nofear87, Commented Jun 22, 2015 at 8:33
You seem to be confusing a $resource with a $http.get request. $http.get returns a promise-like object which you would need to call .then on. $resource will allow you to do this, but you'd need to include it as a module — CodingIntrigue
– CodingIntrigue, Commented Jun 22, 2015 at 8:35
Don't understand. Did you test it? Is it not working? Would suggest using some success and error call back. And return only data not whole $http service. — Harsh
– Harsh, Commented Jun 22, 2015 at 8:35

Raúl Martín · Accepted Answer · 2015-06-22 09:11:39Z

3

ofcservices.getnews() is a promise You need manage with the function sucess and error

ofcservices.getnews().
  success(function(data) {
    $scope.news=data
  }).
  error(function(data, status, headers, config) {
    //show a error
  });

As weel change app.factory('news' to app.factory('newsFactory' and call it in controller('news', function($scope, newsFactory) {

You can get more data about promise in the angular documentation

edited Jun 22, 2015 at 9:11

answered Jun 22, 2015 at 8:37

Raúl Martín

4,7293 gold badges26 silver badges43 bronze badges

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

2 Comments

Stranger B. Over a year ago

Thanks for your answer ! I have an error : "Error: [$injector:unpr] Unknown provider: ofcservicesProvider <- ofcservices <- news

CodingIntrigue Over a year ago

@YasserB. You need to rename your service so that it's not the same name as your controller. Then inject newsService instead of ofcservices as ofcservices is the name of your module

CodingIntrigue · Accepted Answer · 2015-06-22 08:46:59Z

1

The concept is more or less right, but you should use the callback functions to handle the $http response correctly.

But your controller and service have the same name news, which is BAD :-) and you need to inject the newsService and not the module name.

.controller('newsController', function($scope, newsService) {
    newsService.getnews().then(
      function(newsData) {
        $scope.newsData = newsData
      }, 
      function optionalErrorhandler() {});
})

edited Jun 22, 2015 at 8:46

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

answered Jun 22, 2015 at 8:46

Michael

3,1141 gold badge19 silver badges17 bronze badges

Comments

nosdalg · Accepted Answer · 2015-06-22 09:00:01Z

  angular
           .module('MyApp', [])
           .controller('MyController', MyController)
           .factory('MyService', MyService);

            MyController.$inject = ['$scope','MyService'];
            MyService.$inject = ['$http'];

            function MyService($http){
                var service = {
                    var myServiceFunction : function(){
                         $http({
                             // your http request on success return the data.
                         }).success(function(data)){
                             return data;
                         });
                     }
                };
                return service;

            }

function MyController($scope, MyService){
     MyService.myServiceFunction(); //Call service from the controller.
}

Collectives™ on Stack Overflow

How to use a service with Http request in Angular JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related