相关疑难解决方法(0)

使用参数缓存URL视图/状态

我正在使用Cordova和AngularJS制作移动应用程序.目前我已经安装了ui-router用于路由,但我对任何其他路由选择开放.

我的愿望:我想缓存某些与参数绑定的视图.换句话说,我想缓存路径(或页面).

示例情况:假设我们看到一些仪表板页面,点击一些重定向到路径的书籍封面book/2.此路径首次加载到应用程序中.路由器重定向HomeControllerBooksController(无论名称).现在BooksController加载给定的数据$stateParams(book id = 2)并创建充满所选书籍信息的视图.

在这种情况下我想要的是什么:

  1. 我回到仪表板页面 - 它已经加载(缓存?)
  2. 我再次选择书#2
  3. 控制器或路由器注意到已加载有关此书的数据
  4. 视图没有被重新创建,而是从缓存中获取

实际上,最好根据路径缓存我访问的所有内容.预加载也很酷.

原因:表现.当我打开一些书籍列表时,我希望它能够快速显示.每次创建视图时,页面更改的动画看起来很糟糕(它不是很平滑).

任何帮助,将不胜感激.

编辑:

首先,由于我认为这是许多移动HTML应用程序编程人员的常见问题,我想精确一些信息:

  1. 如果可能的话,我不是在寻找黑客,而是寻找明确的解决方案.
  2. 视图中的数据使用AngularJS,所以YES,有类似东西ng-bind,ng-repeat等等.
  3. 数据DOM元素 需要缓存.据我所知,浏览器的布局操作并不像重新创建整个DOM树那样昂贵.重画不是我们可以省略的.
  4. 拥有独立的控制器是很自然的事情.因为没有它我可以离开,我无法想象它是如何工作的.

我有一些半解决方案,但我会对我的愿望严格要求.

解决方案1.

将所有视图放入一个文件(我可以使用gulp builder)并使用ng-show.这是最简单的解决方案,我不相信任何知道AngularJS的人都不会想到它.

一个很好的技巧(来自@DmitriZaitsev)是创建一个辅助函数来显示/隐藏基于当前位置路径的元素.

好处:

  1. 这很简单.
  2. 预加载功能.

缺点:

  1. 所有视图都必须在一个文件中.不要问为什么不方便.
  2. 由于这一切都与移动设备有关,有时我想"清除"内存.我能想到的唯一方法是从DOM中删除这些孩子.肮脏但还可以.
  3. 我不能同时缓存/ book/2和/ book/3.我必须在每个使用参数绑定的视图的一些模板之上动态创建DOM子节点.

解决方案2.

使用来自ui-router-extras的 Sticky States和Future States 非常棒.

好处:

  1. 分开的看法.
  2. 非常简单的用法,非常简单,因为它只是一个插件ui-router.
  3. 可以创建动态子状态.所以可以缓存book1, …

javascript angularjs angular-routing angular-ui-router

12
推荐指数
1
解决办法
1万
查看次数