使用AngularJS工厂加载json数据

Question

我的控制器中有一个巨大的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
      },
      ...
    }
  };

我已经使用了一个工厂,并承诺如解释在这里#2:

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上的完整代码.上面的代码来自第159行.我想这与我的路线有关？

Answer 1

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

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在工厂中调用该函数.加载数据后,它会解析promise,因此LoadData只会调用一次此函数.一旦承诺解决,它将继续并加载视图.

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

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