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

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