AngularJS:从工厂返回配置

AngularJS : Returning a config from factory

本文关键字：返回 配置 工厂 AngularJS      更新时间：2023-09-26

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

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

我相信我已经正确地完成了此操作，但是我仍然收到以下错误（请注意，当我删除控制器中对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应用程序？我在控制台中看到的错误并没有多大意义。

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

以下是一些提示：

  • 仅当您希望进一步转换值时，才在键入 Promises $q上使用 .then。
  • 在$http承诺中使用 .failure 和 .success。两者都具有相同的签名：（data，httpStatus）;您收到的错误可能是由于某些可能不是客户端的错误（就此而言，您对 API 的访问可能会被拒绝）。

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

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

工厂（坏了） 

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;
}]);
相关文章：