angular页面缓存与页面刷新

 

angularJS学习笔记：页面缓存与页面刷新

遇到的问题

现在存在这样一个问题，登录前与登录成功后是同一个页面，只不过通过ngIf来控制哪部分显示，图像信息如下：

 

 

所以，整体工作不是很难，无非就是页面的布局，不过ionic提供了一套UI，可以很方便的布局到这个程度。

但是，当我布局好，接口也连接上以后，测试才发现有些地方有延迟，就像这样：

 

这个过程这样解释：

• 点击“我的”进入个人中心
• 我没有登录，展示的是未登录页面，点击登录
• 进入登录页面，输入用户名密码并登录成功，返回主页面
• 点击“我的”，显示的还是未登录页面！

所以现在问题出来了，在第四步的时候，应该进入的是个人页面，而非未登录状态。

html代码如下：

1. <div class="my_buttons" ng-if="noLogin">
2. <div class="row">
3. <a ng-href="#/login">登录</a>
4. <a ng-href="#/register">注册</a>
5. </div>
6. </div>
7. <div class="my_photo" ng-if="!noLogin">
8. <a ng-href="/#/my/{{user.id}}">
9. <div class="login_logo">
10. <img src="http://120.24.218.56/static/images/users/{{user.profilePhotoId}}" alt="">
11. <p ng-bind="user.username"></p>
12. </div>
13. </a>
14. </div>

先说一下最终的解决方法吧，解决方法就是在路由中，进入该页面时，禁止页面缓存。代码如下：

1. //个人中心
2. .state('my',{
3. url:'/my',
4. cache:'false',
5. templateUrl:'templates/my.html',
6. controller:'MyController'
7. })

知识点解析：缓存

这个问题就是页面的缓存问题，通过查阅书籍可以找到一些解决方法。

一、什么是缓存

一个缓存就是一个组件，它可以透明的存储数据，以便未来可以更快地服务于请求。缓存不需要时常重新计算的数据是安全的，而重新获取数据会导致数据重复。

缓存能够服务的请求越多，整理系统性能就提升得越多。

二、angularJS中的缓存

angularJS提供的内置缓存服务是一个很方便的特性，它让我们能够使用同一机制来缓存自定义的内容。

$cacheFactry简介

$cacheFactory是一个为所有angular服务生成缓存对象的服务。在内部，$cacheFactory会创建一个默认的缓存对象，即使我们并没有显示地创建。

要创建一个缓存对象，可以使用$cacheFactory通过一个ID创建一个缓存：

1. var cache = $cacheFactory('myCache');

这里定义了一个ID为“myCache”的缓存。这个$cacheFactory方法可以接受两个参数：

1.cacheId（字符串）：这个cacheId就是创建缓存时的ID名称，即上面的“myCache”。可以通过get()方法使用缓存名称来引用它。

2.options（对象）：这个选项用于指定缓存如何表现。一般情况下，这个选项对象是一个键：capacity（数字），这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

$cacheFactory()方法返回一个缓存数组。

缓存对象

缓存对象自身有下列方法可以用来与缓存交互：

对象的使用方式如下（以info示例）：

1. cache.info()

1. info()：info()方法返回缓存对象的ID，尺寸和选项。
2. put()：put()方法允许我们把任意JavaScript对象值形式的键（字符串）放进缓存中。比如cache.put(“hello”,”world”)
3. get()：get()方法让我们能够访问一个键对应的缓存值。如果找到了这个键，它会返回它的值，如果没哟找到，它会返回undefined。cache.get(“hello”)
4. remove()：remove()函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到，返回undefined。
5. removeAll()：removeAll()函数用于重置缓存，同时移除所有已缓存的值。
6. destory()：destory()方法用于从$cacheFactory缓存注册表中移除指定缓存的所有引用。

三、$http缓存

angularJS的$http服务创建了一个带有ID为$http的缓存。要让$http请求使用默认的缓存对象很简单：$http方法允许我们给它传递一个cache参数。

也就是说，$http缓存默认是打开的。

当数据不会经常改变时，默认的$http缓存就特别有用了。可以像这样设置它：

1. $http({
2. method:"GET",
3. url:'/api/user',
4. cache:true
5. })

或者使用辅助方法.get()

1. $http.get('/api/user',{
2. cache:true
3. })

现在，通过$http到URL /api/user的每个请求将会存储到默认的$http缓存中。这个$http缓存中的请求键就是完整的URL路径。

 

通过在$http选项中传入参数true，可以告诉$http服务使用默认的缓存。如果我们不想经常干扰那些缓存，使用默认缓存时很有用的。