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

时间:2014-04-02 23:46:43

标签: angularjs

在我的AngularJS应用程序中,我需要从远程REST端点检索多个静态数据集合。这些数据集合将在整个应用程序生命周期中用作静态查找列表。我想在初始应用程序启动时填充所有这些列表,并保留并提供给多个控制器。我宁愿不动态加载任何其他数据,因为这个特定应用程序的假设之一是,一旦加载,任何进一步的网络连接可能暂时不可用。 可以采取初步命中,因为用户将通过阅读第一页的静态内容而全神贯注。 我正在考虑将此批量加载作为初始应用程序运行块的一部分,并将所有这些静态数据粘贴到附加到$ rootScope的各种集合中(这将使其在其他地方可用) 处理此要求的最佳方法是什么?

2 个答案:

答案 0 :(得分:3)

有趣的是,我刚刚写了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

答案 1 :(得分:1)

我接近这个的方法是使用服务(或我嵌套的服务集合),并在true get函数中将缓存设置为$http。通过这种方式,服务可以传递到您想要的任何控制器,无需额外的http请求即可获得缓存结果。

如果你不清楚,我可以试着把这个放到一个例子中,让我知道。

编辑:您可以等待第一次调用此服务来执行此缓存,或者在app load上执行此操作,无论哪种方式都可以。