我如何在 angularjs uirouter 中预加载状态而不导航到它？

Question

我正在使用 uirouter 开发一个包含多个页面的 angularjs 应用程序。 加载属于当前状态的页面后，我希望在后台预加载其他页面，以便当用户选择其中一个页面时，它们会立即出现在屏幕上。

我已经尝试通过搜索网络、uirouter 文档和堆栈溢出来寻找有关如何执行此操作的选项，但我找不到任何有用的东西。

有没有办法在不导航到该视图（使其可见）的情况下预加载 uirouter 视图？

Answer 1

除非您实际上是在 angularJS 中获取完整的 HTML 页面（我对此表示怀疑），否则您是通过 API 加载数据，这些数据将被插入到打包的 HTML 文件/模板中。

我实现这个的方法是触发我的服务（我使用工厂）通过 HTTP 获取数据并缓存它。您可以通过将获取的数据存储在工厂内的变量中（多个控制器/指令可以访问它）或通过简单地在 HTTP 调用中使用

cache:true

参数来缓存，如下所示：

factory.getDataForPage = function() {
  var url = "/api/data.json";
  var request = $http({
    method: "get",
    params: {},
    url: url,
    cache: true
  });
  return (request.then(rs.handleSuccess, rs.handleError));
}

在那种情况下，您会将数据返回给控制器，但您也可以轻松地将其存储在工厂中，然后在执行 HTTP 调用之前放入逻辑来检查该数据是否已经存在。

长篇大论的解释——你不预缓存页面（本质上 HTML 已经预缓存）——你预缓存数据