angularjs - 在 AngularJS 应用程序中预填充远程数据的最佳方法

Question

在我的 AngularJS 应用程序中，我需要从远程 REST 端点检索多个静态数据集合。这些数据集合将作为静态查找列表在整个应用程序生命周期中使用。我希望所有这些列表都在初始应用程序启动时填充，并保留并可供多个 Controller 使用。我不想动态加载任何额外的数据，因为这个特定应用程序的假设之一是，一旦加载，任何进一步的网络连接可能会在一段时间内不可用。 初次点击是可以的，因为无论如何用户都会全神贯注于阅读第一页的静态内容。 我正在考虑使这种大量加载成为初始应用程序运行 block 的一部分，并将所有这些静态数据粘贴到附加到 $rootScope 的各种集合中(这将使该数据在其他地方可用) 满足此要求的最佳方法是什么？

Answer 1

有趣的是，我刚刚写了一个blog post about extending the script directive来处理这种情况。

这个概念很简单。当页面从服务器加载时，您可以将 JSON 数据嵌入到页面中，如下所示:

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

然后，您扩展脚本指令，以便它为您解析数据，并通过服务将其提供给应用程序的其他部分。

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

您可以在这里看到它的现场演示:http://embed.plnkr.co/mSFgaO/preview