A few weeks ago Gabriel Scholz wrote a blog about frictionless data preloading in AngularJS which I quite enjoyed. He also updated the blog later conceding that there was an even better method. From my experience, neither options were ideal and I wanted to write a short entry on how I propose we preload data in AngularJS.

A few objectives

I think that there are a few key attributes that a good solution has to have:

  1. It shouldn't pollute the global name space
  2. It shouldn't require declaration within the scope of ng-app in the DOM
  3. You should be able declare multiple pieces of data separately and concatenate them
  4. Preloaded data should be optional, not a dependency

The two previously suggested solutions

  1. Gabriel suggested that we put JSON objects inside of script tags, identify them by a type such as "text/preloaded" and then parse and add them to a preloaded config object via a directive that looks for script tags. I actually really like this idea but it didn't satisfy rule #2. Your script tag needed to be inside of ng-app's scope.

  2. The blog entry was updated with a solution of simply declaring another module within script tags. However, this solution doesn't satisfy rules #3 and #4 very well. I would hate to be declaring and depending on multiple modules of preloaded data.

My proposed solution

I actually really like Gabriel's method, except for running the search for preloaded data inside of a directive. Instead I say it should be done inside of a .run(), which occurs after .config() and before .controller(). Like so:

This method satisfies all 4 rules I stated above. I would love to hear feedback if anyone has a better method.