Question

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

我正在尝试在我的Angular应用中设置伪常量，以便能够从$http.get()获取一些API配置详细信息。我读到这样做的正确方法是创建一个返回promise（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);

}]);

我也试过让工厂归还一个物体，但这也没有用。这是我为此尝试的代码：

工厂

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应用程序的方法：）

以下是一些指示：

只有当您希望进一步转换价值时才使用.then $ q类型承诺。
在$ 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传递实际工厂函数之前过早地关闭了数组。第一行/第三行代码应该如下：

<强>厂（固定）

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

AngularJS：从工厂返回配置

2 个答案: