使用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) { TypeError: undefined is not a function stadtMobilRates().success(function(data) { line。為什么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();
});