CODEWITHSUNDEEP
angularjs
Eugene Goldberg
Eugene Goldberg

Reputation: 15544

The best way to pre-populate remote data in AngularJS app

In my AngularJS app, I need to retrieve multiple collections of static data from remote REST endpoints. Those data collections will be used throughout the entire application life cycle as static lookup lists. I would like for all those lists to be populated upon the initial application startup, and to be retained and made available to multiple controllers. I would prefer not to load any additional data dynamically, as one of the assumptions for this particular app, is that, once loaded, any further network connections may not be available for a while. It is OK to take an initial hit, as the users will be preoccupied by reading a static content of the first page anyway. I was thinking of making this mass loading a part of the initial application run block, and stick all this static data into various collections attached to the $rootScope (which would make that available everywhere else) What is the best way to handle this requirement?

Upvotes: 2

Views: 672

Answers (2)

Josh
Josh

Reputation: 44906

Interestingly enough, I just wrote a blog post about extending the script directive to handle this very scenario.

The concept is simple. You embed JSON data in your page when it loads from the server like so:

<script type="text/context-info">
{
   "name":"foo-view",
   "id":34,
   "tags":[
      "angular",
      "javascript",
      "directives"
   ]
}
</script>

Then you extend the script directive so it parses the data out for you and makes it available to other parts of your application via a service.

if(attr.type === 'text/context-info'){
  var contextInfo = JSON.parse(element[0].text);

  //Custom service that can be injected into
  // the decorator
  contextInfoService.addContextInfo(contextInfo);
}

You can see a live demo of it here: http://embed.plnkr.co/mSFgaO/preview

Upvotes: 3

Jorg
Jorg

Reputation: 7250

The way I approach this is to use a service (or a collection of services I nest), and set caching to true in the $http get functions. This way the service can be passed into any controller you desire, having cached results available to you without the need for additional http requests.

I can try to put this into an example if this is unclear to you, let me know.

edit: you can either wait for the first call to this service to do this caching, or do this on app load, either way is possible.

Upvotes: 1

Related Questions