使用 AngularJS 工厂加载 json 数据

Loading json data with an AngularJS factory

本文关键字：json 数据 加载 工厂 AngularJS 使用      更新时间：2023-09-26

我的控制器中有一个巨大的json对象，我想把它输出到一个单独的文件中。到目前为止，我正在这样做：

myApp.controller('smController', ['$scope', function($scope) {
  ...
  var stadtmobilRates = {
    classic: {
      A: {
        night: 0,
        hour: 1.4,
        day: 21,
        week: 125,
        km000: 0.2,
        km101: 0.18,
        km701: 0.18
      },
      ...
    }
  };

我使用了一个工厂和承诺，如Stackoverflow上解释的那样： 

myApp.factory('stadtMobilRates', function($http) {
  var promise = null;
  return function() {
    if (promise) {
      // If we've already asked for this data once,
      // return the promise that already exists.
      return promise;
    } else {
      promise = $http.get('stadtmobilRates.json');
      return promise;
    }
  };
});
myApp.controller('smController', ['$scope', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

现在我在stadtMobilRates().success(function(data) {线得到一个TypeError: undefined is not a function。为什么尽管我已经将stadtMobilRates工厂注入控制器，但仍不接受它？

编辑#1：我已按照虾的建议将工厂名称添加到数组中。 

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });
  console.log(stadtmobilRates);

然而，城市移动率是null？

编辑#2：我在Plunker上创建了我的应用程序的简化版本。嗯，它有效。在完整的应用程序中，我正在使用不同的路线，stadtmobilRates仍然null。我无法使用路线创建完整应用程序的 Plunker。所以这是GitHub上的完整代码。上面的代码来自第 159 行。我想这与我的路线有关？

您忘记在数组中传递工厂的名称。通常，您传递一个数组，该数组的元素由字符串列表组成，后跟函数本身。确保数组与函数声明中的参数保持同步。这样，注入器就知道要注入哪些服务到函数中。

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {

编辑

这就是我会这样做的方式...当使用路由时，我喜欢使用resolve因此数据加载一次并存储。所以在$routeProvider中，我会将 smController 部分更改为以下内容......

 when('/sm', {
      templateUrl: 'partials/sm.html',
      controller: 'smController',
      resolve:{
              load:function(stadtMobilRates){
                  return stadtMobilRates.LoadData();
          }
    }).

我还修改了工厂

myApp.factory('stadtMobilRates', function ($q, $http) {
var mobilRates = null;
function LoadData() {
    var defer = $q.defer();
    $http.get('stadtmobilRates.json').success(function (data) {
        mobilRates = data;
        defer.resolve();
    });
    return defer.promise;
}
return {
    GetData: function () { return mobilRates ; },
    LoadData:LoadData
}
});

因此，在加载此路由之前，它将在工厂中调用 LoadData 函数。加载数据后，它会解析承诺，因此此LoadData函数只会被调用一次。一旦承诺解决，它将继续加载视图。

所以现在在你的控制器中，每当你想要获取数据时，你所要做的就是调用函数GetData 

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) 
{
     var stadtmobilRates = stadtMobilRates.GetData();
});
相关文章：