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

2024-01-02

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


有趣的是,我刚刚写了一个关于扩展脚本指令的博客文章 http://www.technofattie.com/2014/03/25/how-to-extend-angular-script-directive.html处理这种情况.

这个概念很简单。当页面从服务器加载时,您可以将 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 http://embed.plnkr.co/mSFgaO/preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 AngularJS 应用程序中预填充远程数据的最佳方法 的相关文章

随机推荐

  • Python - 仅运行一行代码,而不运行脚本中其余的多行代码

    在 Python 中 在 IDLE 内 在文件编辑器窗口中 如何仅运行脚本中选定的单行代码 而不运行程序的其余行 您必须从命令行运行代码行 使用 c 命令 参数 假设您的文件名为 foo py python c import foo pri
  • 根据单词是否粗体更改单词样式的速度很慢

    我想更改活动文档中几个单词的样式 每个单词可能出现多次 有些词是粗体 有些是非粗体 单词存储在数组中Arr 如果找到的单词 X 是非粗体 则将样式替换为StyleA如果它是粗体 则将其更改为StyleB 以下代码有两个问题 1 粗体和非粗体
  • 什么是总线错误?它与分段错误有什么不同吗?

    总线错误 消息是什么意思 它与总线错误有何不同分段故障 https en wikipedia org wiki Segmentation fault 如今 总线错误在 x86 上很少见 当您的处理器甚至无法尝试请求的内存访问时 就会发生总线
  • 无法在 Next 中传递 props

    我正在使用 Next Js React SSR 制作服务器端渲染应用程序 Index js 只需在index中调用另一个组件Layout即可 import Layout from layout import React from react
  • 记录 CMake 模块的正确方法是什么?

    快速的 Google 搜索 实际上许多相当广泛的 Google 搜索 无法解释如何正确记录 CMake 模块 我正在寻找一种记录自定义 CMake 模块的方法 以便它们与cmake help module
  • Django Test 模拟 ImageField 阻止上传或测试后清理

    我正在为我的项目开发一个测试用例 涉及一些图像和文件字段 有些对象加载了固定装置 有些对象是在测试期间创建的 我用 InMemoryUploadedFile 模拟了我的图像 创建新的测试对象时 正在上传模拟图像 到 MEDIA ROOT 目
  • 如果你的基类有一个虚拟析构函数,你自己的析构函数自动是虚拟的

    我知道标题的说法是正确的 那么常规函数呢 例如 class Father virtual void foo class Son public Father void foo class GrandSon public Son void fo
  • 让 Karma、6to5ify 和 Istanbul 合作

    我有 Browserify 6to5ify 和 Karma 可以很好地发挥作用 成功运行我的规范 然而 当我添加代码覆盖率时 事情就变糟了 我尝试了几种方法 Add browserify istanbul转换为我的 karma conf j
  • 如果我想添加类型化属性,子类化 NSNotification 是正确的途径吗?

    我正在尝试子类化NSNotification Apple 的文档NSNotification陈述以下内容 NSNotification是一个没有实例变量的类簇 像这样 你必须子类化NSNotification并重写原始方法name obje
  • 无法选择 id=":1" 的 div

    对网络东西有点菜鸟 但我有一个带有此标签的 div div class 我已经测试过我的 jQuery 可以正常工作 当前使用版本 2 1 3 我已经测试了许多其他关于选择器中冒号的 SO 帖子中推荐的选择器 然后是其他一些 我已经分别尝试
  • ruby - 如何在 minitest 示例中使用标签

    I have require minitest spec require minitest autorun require minitest tags require rspec expectations describe One happ
  • 在一行中多次使用相同模式的正则表达式

    我正在寻找的模式是这样的 TXT txt 该模式可以在任何给定行中多次出现 我想要么提取模式的每个实例 要么使用 sed 或其他任何东西 删除每个实例周围的文本 Thanks 您可以将 Perl 用作 cat file foo TXT1 t
  • 如何在 Xcode 7 中使用对象库的堆栈视图

    我最近安装了Xcode 7 测试版并发现了一些东西new在对象库中 例如 水平堆栈视图和垂直堆栈视图 当我在其中放入一些控件时 stackview 似乎可以调整大小 根据控制尺寸 当我呈现更多控制堆栈时 似乎从堆栈视图开始自动调整 任何一个
  • 获取os.Error值的一种方法——字符串值(Go)

    如何获取字符串值os Error 也就是说 分配给一个变量 例如 package main import errors fmt func main err errors New an error message s err Error fm
  • Laravel: array_merge(): 参数 #2 不是数组错误

    异常开始出现在所有视图中 当我尝试运行时composer update 它总是以 error type ErrorException message array merge Argument 2 is not an array file l
  • ArrayList#size() 大于对象的实际数量

    我的 Android 应用程序中有一个 ArrayList 其中有 2 个项目 然而 它的 size 方法返回 3 我知道这听起来非常简单和愚蠢 但它是这样的 为什么会出现这种情况呢 ArrayList 的大小如何返回错误的数字 当我迭代列
  • 无需数据库即可存储数据?

    如果我想存储电子邮件 但没有数据库 例如 MySQL 我该怎么办 数据应该可以从 PHP 访问和写入 但常规 访问者 不得看到该数据 希望你能帮忙 您可以将它们放入文件中 data Defined somewhere file put co
  • 优先 Web SDK 与 REST API

    使用 Priority 的新工具开发网站时 在哪些情况下使用 Web SDK 访问 Priority 会比使用 REST API 更好 反之亦然又如何呢 这取决于您的需求 REST API 主要用于与其他应用程序集成 而 WEB SDK 用
  • 在 Mercurial 中指定点作为修订版

    我发现一些 Mercurial 命令的修订版被指定为点 例如 hg revert all r hg update C r hg pull r 这个点的含义是什么 它对应哪个版本 hg help revisions says 保留名称 指示工
  • 在 AngularJS 应用程序中预填充远程数据的最佳方法

    在我的 AngularJS 应用程序中 我需要从远程 REST 端点检索多个静态数据集合 这些数据集合将作为静态查找列表在整个应用程序生命周期中使用 我希望所有这些列表都在初始应用程序启动时填充 并保留并可供多个控制器使用 我不想动态加载任