Angular JS：使用$ http.get（）導入JSON數據 - 在控制器中工作，不在服務中 - 為什么？

Question

我正在嘗試將JSON數據導入angularJS應用程序。 我將我的應用程序拆分為控制器和導入服務，但兩者都在不同的文件中。 我也在使用bower，grunt和yeoman（這是因為工作，我不太習慣這些，也許還有一個問題。）

奇怪的行為是：

我想用$ http.get（）檢索JSON數據並解決它 - 所有這些都在服務中，這樣我就可以將數據對象從那里分發給主控制器，而不必在那里解析它。 奇怪的是，我沒有得到任何數據，它是空的或不可讀的。 然后我發出了$ http.get（）mehtod給出的承諾，並在控制器中解析了它。 這不是我想要的，但現在它有效......但為什么呢？

我想這是一個騙子，但我和我的團隊成員都找不到。 奇怪的是，做一個沒有咕嚕聲的小測試應用程序，自耕農和涼亭它起作用了。

我很欣賞每一個提示或想法...... Jana

這是我的代碼來自NOT工作版本 ，首先是帶有控制器的主模塊：

/** Main module of the application. */
(function () {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = CategoryFactory.getCategories();
      $scope.subcategories = CategoryFactory.getSubCategories();

    }
  );
})();

服務部分：

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var categories = [];
      var subcategories = [];

      $http.get("../mockdata/categories.json").then(function (response) {
        categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        subcategories = response.data;
      })
      return {
        getCategories: function(){
          return categories;
        },
        getSubCategories: function(){
          return subcategories;
        }
      }
    }
  );
})();

這是我的WORKING版本的代碼，首先是帶控制器的主模塊：

/** Main module of the application. */
(function() {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = [];
      $scope.subcategories = [];

      CategoryFactory.getCategories().then(function(response) {
        $scope.categories = response.data;
      });
      CategoryFactory.getSubCategories().then(function(response) {
        $scope.subcategories = response.data;
      });
    }
  );
}
)();

服務部分：

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http, $q) {

      var categoryURL = "../mockdata/categories.json";
      var subcategoryURL = '../mockdata/subcategories.json';

      function getSubCategories() {
        return $http.get(subcategoryURL);
      }
      function getCategories() {
        return $http.get(categoryURL);
      }
      return {
        getCategories: getCategories,
        getSubCategories: getSubCategories
      }
    }
  );
})();

Answer 1

這會破壞您的引用，因此從服務器循環數據並將其推送到您需要的變量中：

  $http.get("../mockdata/categories.json").then(function (response) {
    for(var x = 0; x < response.data.length; x++){
        categories.push(response.data[x]);
    }
  });

Answer 2

$ http調用默認是異步的。

因此，在您的第一個版本中，當您編寫類似$scope.categories = CategoryFactory.getCategories(); 你得到空類別，因為當你訪問類別時，它可能沒有加載響應數據。

你的應用流程如下 -

1. 你加載控制器
2. 你打電話給服務
3. 服務電話$ http
4. 您嘗試訪問類別（但在從服務器返回響應之前，數據將不可用）
5. $ http.then將數據加載到$ scope.categories

Answer 3

您將數據存儲在Angular基元中，並且這些基元不會更新。 而是將所有數據存儲在一個對象中，它可以工作（你還需要更新控制器）

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var data = {};

      $http.get("../mockdata/categories.json").then(function (response) {
        data.categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        data.subcategories = response.data;
      })
      return {
        getCategories: function(){
          return data.categories;
        },
        getSubCategories: function(){
          return data.subcategories;
        }
      }
    }
  );
})();