AngularJS：从工厂返回配置

Question

Let me start by saying that I'm a complete Angular newbie.

I am trying to set a pseudo constant in my Angular app to be able to get some API configuration details from an $http.get() . I read that the proper way to do this is to create a factory that returns the promise ( source ) and then inject that factory into the controller(s).

I believe I have done that properly, however I'm still getting the following error (note that when I remove the references to apiConfig in the controller, the errors disappear):

 Error: [ng:areq] http://errors.angularjs.org/1.3.10/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%string
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:6:417
    at Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:19:417)
    at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:20:1)
    at Vb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:34:283)
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:36:439)
    at Object.$get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:35:71)
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:96)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:38:410
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:36:308)

Here is my code:

Factory

app.factory('apiConfig', ['$http', 'API_KEY'], function ($http, API_KEY) {
    return $http.get('http://api.themoviedb.org/3/configuration?api_key=' + API_KEY);
});

Controller

appControllers.controller("MovieDetailCtrl", ['$scope', '$routeParams', '$http', 'API_KEY', 'apiConfig', function ($scope, $routeParams, $http, api_key, apiConfig) {
    "use strict";

    apiConfig.then(function (response) {
        $scope.apiConfig = response.data;
    });

    var setMovieObject = function (response) {
        $scope.movie = response.data;
    };

    $http.get('http://api.themoviedb.org/3/movie/' + $routeParams.movieId + '?api_key=' + api_key).then(setMovieObject);

}]);

I've also tried having the factory return an object, but that also didn't work. Here is the code I tried for that:

Factory

app.factory('apiConfig', ['$http', 'API_KEY'], function ($http, API_KEY) {

    var theConfig = {};

    theConfig.getConfig = function () {
        return $http.get('http://api.themoviedb.org/3/configuration?api_key=' + API_KEY);
    };

    return theConfig;
});

Controller

appControllers.controller("MovieDetailCtrl", ['$scope', '$routeParams', '$http', 'API_KEY', 'apiConfig', function ($scope, $routeParams, $http, api_key, apiConfig) {
    "use strict";

    apiConfig.getConfig().then(function (response) {
        $scope.apiConfig = response.data;
    });

    var setMovieObject = function (response) {
        $scope.movie = response.data;
    };

    $http.get('http://api.themoviedb.org/3/movie/' + $routeParams.movieId + '?api_key=' + api_key).then(setMovieObject);

}]);

Also, as a follow up, is there any resources on reading AngularJS stack traces? Or is there a better way to debug AngularJS apps? The errors I'm seeing in the console don't really make much sense.

Answer 1

For Debugging, please use Batarang . It is THE way to debug AngularJS applications :)

Here are a few pointers:

• Use .then on $q type Promises only when you wish to further transform the value.
• Use .failure and .success on $http-Promises. Both have the same signature: (data, httpStatus); It may be possible that the error you are getting is due to some error which may not be client-sided (your access to the api may be denied, for that matter).

Check for these first and use Batarang. Also: What kind of errors are you getting? Where does the AngularJS Stacktrace point you to?

Answer 2

Found the problem. It was an incorrectly placed square bracket. Originally I had:

Factory(broken)

app.factory('apiConfig', ['$http', 'API_KEY'], function ($http, API_KEY) {
    return $http.get('http://api.themoviedb.org/3/configuration?api_key=' + API_KEY;
});

The problem was I prematurely closed the array before passing Angular the actual factory function. The first/third lines of code should have been as follows:

Factory(fixed)

app.factory('apiConfig', ['$http', 'API_KEY', function ($http, API_KEY) {
    return $http.get('http://api.themoviedb.org/3/configuration?api_key=' + API_KEY;
}]);