AngularJS：从工厂返回配置

Question

首先让我说我是一个完整的 Angular 新手。

我正在尝试在我的 Angular 应用程序中设置一个伪常量，以便能够从 $http.get() 获取一些 API 配置详细信息。我读到正确的方法是创建一个 return 承诺 (source) 的工厂，然后将该工厂注入控制器。

我相信我已经正确地做到了，但是我仍然收到以下错误（请注意，当我在控制器中删除对 apiConfig 的引用时，错误就会消失）：

 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)

这是我的代码：

工厂

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

控制器

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);

}]);

我也尝试过让工厂 return 成为一个对象，但这也没有用。这是我为此尝试的代码：

工厂

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;
});

控制器

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);

}]);

另外，作为后续，是否有任何关于阅读 AngularJS 堆栈跟踪的资源？或者有没有更好的方法来调试 AngularJS 应用程序？我在控制台中看到的错误并没有多大意义。

Answer 1

调试请使用Batarang。这是调试 AngularJS 应用程序的方法 :)

这里有几点建议：

仅当您希望进一步转换值时，才对 $q 类型的 Promise 使用 .then。
在 $http-Promises 上使用 .failure 和 .success。两者具有相同的签名：(data, httpStatus);您收到的错误可能是由于某些可能不是客户端的错误造成的（就此而言，您对 api 的访问可能会被拒绝）。

首先检查这些并使用 Batarang。另外：你得到什么样的错误？ AngularJS Stacktrace 将您指向何处？

Answer 2

找到问题了。这是一个错误放置的方括号。最初我有：

工厂（坏了）

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

问题是我在传递 Angular 实际工厂函数之前过早地关闭了数组。 first/third 行代码应该如下所示：

工厂（固定）

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

AngularJS：从工厂返回配置

AngularJS : Returning a config from factory

javascript

angularjs

angularjs-factory