angularjs 頁面緩存及動態刷新解決方案

一、准備工作

　　框架：angularjs 

　　ui組件庫：ionic1  

二、頁面緩存cache

　　路由設置cache參數，true為緩存，false為不緩存，代碼如下：

angular.module('app',["AppCtrl"])   //依賴注入AppCtrl控制器module
.config(function($stateProvider){
$stateProvider
.state("home",{
    url:"/home",    //定義路由的名稱
    templateUrl:"./home.html",    //html視圖相對路徑
    controller:"AppCtrl",  //定義視圖對應對的控制，需要注入
    cache:true     //設置緩存，true為頁面緩存，false不緩存
})
})

三、動態刷新

　　使用ionic組件ion-view的生命周期來跳過緩存，達到動態刷新的效果（頁面使用ion-view容器）

　　可以通過設置一個全局變量（定義的方式很多，也可以設置一個sessionStorage來充當變量），然后if語句來判斷是否執行enter鈎子里面的代碼。

$scope.$on('$ionicView.enter', function() {
  //每次進入頁面都會執行enter鈎子
});

　　ion-view還有很多的鈎子方法：

 

　　$ionicView.beforeEnter 

　　$ionicView.enter

　　$ionicView.afterEnter

　　$ionicView.beforeLeave

　　$ionicView.leave

 

　　$ionicView.afterLeave

　　$ionicView.unloaded

　　合理的使用就能達到很多我們需要的效果。