哪个是使用Angular检索json数据的最佳方法

时间:2015-06-14 16:23:35

标签: javascript json angularjs

我有像我下面的JSON结构一样隔离的数据

{
    "Id": {
        "1": [
            {
                "Item1": "Item One",
                "Item2": "Item Two",
                "Item3": "Item Three"
            }
        ],
        "2": [
            {
                "Item1": "Item One",
                "Item2": "Item Two",
                "Item3": "Item Three"
            }
        ],
        "3": [
            {
                "Item1": "Item One",
                "Item2": "Item Two",
                "Item3": "Item Three"
            }
        ]
    }
}

但我也在每个id的单独json文件中有数据。数据在大多数情况下都是恒定的。但它会经常访问。

我知道如何以上述方式编写访问数据的代码。但令我感到困惑的是,访问数据的方式会更好,更快。

1 个答案:

答案 0 :(得分:2)

您可以采用的一种方法是将服务注入您的控制器,该服务将具有返回此数据的承诺的功能。这是有利的,因为您可以注入并重复使用此服务" app wide"您还可以缓存性能响应。这是一个示例实现...

var app = angular.module('app', []);

app.service('DataService', ['$http', function ($http) {
    this.getData = function(){
      return $http.get('data.json', { cache: true })
    }
}]);

app.controller('ctrl', ['$scope', 'DataService', function($scope, DataService) {
    DataService.getData().then(function(response) {
        console.log(response.data);
    });
}]);

Plunker Link - 演示

唯一需要注意的是,在异步调用中调用.then

你能做到这一点的另一种方法,就是在这里做一些假设,可能包括以下场景:假设这个"常数"数据类似于某些配置数据,您希望在以后不再解决控制器中的异步承诺的情况下掌握这些数据。您可以在最初检索此数据后手动引导您的应用程序,这样可以方便地了解您是否预先拥有此数据。

为此,我们创建一个名为data

AngularJS constant
var app = angular.module('app', []);

(function() {
  var initInjector = angular.injector(['ng']);
  var $http = initInjector.get('$http');
  $http.get('data.json').then(
    function (response) {

      app.constant('data', response.data);

      angular.element(document).ready(function() {
          angular.bootstrap(document, ['app']);
      });
    }
  );
}());

app.controller('ctrl', ['$scope', 'data', function($scope, data) {
    console.log(data)
}]);

您可以看到这是简化的,至少在我们的控制器级别。我们只是注入data作为依赖项,已经为我们解析了$http.get()

Plunker Link - 演示 - 常量