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服務使用默認的緩存。如果我們不想經常干擾那些緩存，使用默認緩存時很有用的。