AngularJS : factory function undefined in controller

Question

I used to make it work the exact same way before, and it's driving me crazy. I want to perform a $http GET call into a factory and then get back the result into the controller, to be processed.

The factory (don't pay attention to the madness of the request url ):

App.factory('MessageFactory', function ($http) {
        var MessageFactory = {
            getCast: function () {
                var request = {
                    method: "GET",
                    url: spHostUrl + "/_api/web/Lists/getByTitle('" + listTitle + "')/items?$select=AuthorId,Author/Name,Author/Title,Type_x0020_message,Title,Modified,Body,Expires,Attachments&$expand=Author/Id",
                    headers: {
                        "Content-Type": "application/json;odata=verbose",
                        "Accept": "application/json;odata=verbose"
                    }
                };

                $http(request)
                .then(function (res) {
                    return res.data;
                }).catch(function (res) {
                    console.error("error ", res.status, res.data);
                }).finally(function () {
                    console.log("end");
                });
            }
        };
        return MessageFactory;
    });

Now the controller :

App.controller('MessageController', function ($scope, $http, $log, $attrs, MessageFactory) {
        $scope.messages = MessageFactory;
        MessageFactory.getCast().then(function (asyncCastData) {
            $scope.messages.cast = asyncCastData;
        });
        $scope.$watch('messages.cast', function (cast) {
            //do stuff
        });
});

When I test it I get the following error :

Error: MessageFactory.getCast(...) is undefined @/Scripts/App.js:167:9

The line 167 is indeed this line in the controller

MessageFactory.getCast().then(function (asyncCastData) {

My app works fine for any other feature, so my issue appeared when adding this part, and I'm pretty sure my controller doesn't know my factory yet and thus try to access to his function. As it's an asynchronous call, it should work with the code in the controller. I need your help on this, thanks.

Answer 1

You must be getting .then of undefined error

Because you missed to return promise from service method.

Service

var MessageFactory = {
  getCast: function() {
    var request = {
      method: "GET",
      url: spHostUrl + "/_api/web/Lists/getByTitle('" + listTitle + "')/items?$select=AuthorId,Author/Name,Author/Title,Type_x0020_message,Title,Modified,Body,Expires,Attachments&$expand=Author/Id",
      headers: {
        "Content-Type": "application/json;odata=verbose",
        "Accept": "application/json;odata=verbose"
      }
    };

    return $http(request) //returned promise from here
      .then(function(res) {
        return res.data;
      }).catch(function(res) {
        console.error("error ", res.status, res.data);
      }).finally(function() {
        console.log("end");
      });
    }
};