AngularJS promises behavior

Question

I have some code using angularJS. In my application initialization logic, I keep geting an error, but I can't figure out why. I think this may be a problem with the promise.

Here is my controller:

// TeacherCtrl.js
(function () {
    "use strict";

    angular
        .module("app.controllers")
        .controller("TeacherController", TeacherController)
        .config(["$routeProvider", config]);

    TeacherController.$inject = ["DataService"];

    function TeacherController(DataService) {
        var vm = this;
        vm.data = {};

        begin(7, 163000001);

        function begin(appId, schoolId) {
            DataService.GetData(appId, schoolId).then(function (data) {
                console.log(data);
            });
        }
    }

    function config($routeProvider) {
        $routeProvider
            .when("/teacher", {
                "templateUrl": "components/teacher/teacher.html"
                , "controller": "TeacherController"
                , "controllerAs": "vm"
            });
    }
})();

And here is my service:

// app.services.js
(function () {
    "use strict";

    angular
        .module("app.services")
        .factory("DataService", ApplicationData);

    DataService.$inject = ["KeysResource"];

    function DataService(KeysResource) {
        return {
            "GetData": GetData
        };

        function GetData(appId, schoolId) {
            return KeysResource.load({
                "appId": appId,
                "schoolId": schoolId
            });
        }
    }
})();

and this is the error I am getting:

 TypeError: undefined is not a function
at iniciar (http://my.url/TeacherCtrl.js:18:72)
at new TeacherController (http://my.url/TeacherCtrl.js:15:9)
at .. // angular js code here

What it's looks like is that the ".then" function for the promise is not immediately available. Shouldn't it be???

EDIT

Here is the KeysResource I've mentioned

"use strict";

(function () {
    var restClient = angular.module("restClient", ["ngResource"]);
    var serviceURL;

    restClient
        .factory("KeysResource", ["$resource", function ($resource)
            {
                serviceURL = "http://my.url/service/";

                return $resource(serviceURL, null, {
                    "load": {
                        "method": "get",
                        "url": serviceURL + "load"
                    }
                });
            }]);
})();

Is `KeysResource` an `ngResource`? What does `KeysResource.load` look like? I don't see it in `ngResource` documentation. I also don't see how `DataService.GetData` doesn't exist as the other three people do... but maybe I'm missing something — Tom, Mar 10 '15 at 20:09
KeysResource.load() must return a promise. You haven't shown us that code, so I can't tell you why that would be. — HankScorpio, Mar 10 '15 at 20:59
I've posted the (almost) full code. I think DataService.GetData is ok — , Mar 11 '15 at 14:17

score 1 · Accepted Answer · edited May 23 '17 at 12:22

I've found this question with a similar problem.

The solution is related to $resource, which does not return a promise directly. If I want to use the promise of $resource, I will need to use $promise too, like that:

    //TeacherCtrl.js
    function begin(appId, schoolId) {
        DataService.GetData(appId, schoolId).$promise.then(function (data) {
            console.log(data);
        });
    }

AngularJS promises behavior

1 Answers1