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

Question

I have data which I segregated just like the JSON structure below

{
    "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"
            }
        ]
    }
}

But I also have the data in separate json files for each id. And the data will be constant for most of the time. But it is going to accessed much frequently.

I know how to write the code to access data in both the mentioned ways. But what I am confused is which way would be better and faster to access the data.

Answer 1

One way you could approach this would be to inject a service into your controllers which will have a function to return a promise for this data. This is advantageous because you'll be able to inject and reuse this service "app wide" and you can also cache the response for performance. Here is an example implementation...

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 - demo

The only thing to be mindful of if is the call to .then since this in an asynchronous call.

---

Another way you can do this, and this is making some assumptions here, could include the following scenario: Assume this "constant" data is something like some configuration data and you wish to get your hands on this without resolving asynchronous promises in your controllers later on. You could manually bootstrap your app after initially retrieving this data, offering the convenience of knowing you'll have this data up front.

To do this, lets create an AngularJS constant called data

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

You can see this is simplified, at least at our controller level. We just inject data as a dependency which already has resolved our $http.get() for us.

Plunker Link - demo - constants