使用AngularJS工厂加载json数据

时间:2014-12-30 23:21:14

标签: javascript json angularjs factory

我的控制器中有一个巨大的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上使用了工厂和承诺,如here所述:

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

现在我在TypeError: undefined is not a function行获得了stadtMobilRates().success(function(data) {。尽管我已将stadtMobilRates工厂注入控制器,为什么不接受它?

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

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

  console.log(stadtmobilRates);

然而stadtmobilRates是null

编辑#2:我已在Plunker上创建了应用的简化版本。好吧它有效。在完整的应用中,我使用不同的路线,其中stadtmobilRates仍然是null。我无法使用路线创建完整应用的Plunker。所以这是GitHub上的完整代码。上面的代码来自Line 159。我想这与我的路线有关?

1 个答案:

答案 0 :(得分:6)

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

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