在AngularJS中,可以检测模板是否已经加载到缓存中
It is possible in AngularJS to detect if template is already loaded in cache?
我使用$routeProvider来加载不同类型的模板,然后,为了优化目的,jquery ajax请求获得将在模板中解析的JSON数据。
当页面加载时,我想要一个覆盖来隐藏空模板或以前的模板与新数据,这取决于缓存是否已经设置。
所以现在,我想知道是否有办法从$routeProvider获得不同的缓存模板,以知道我是否设置了覆盖在数据ajax调用或在模板ajax调用使用:
$scope.on('$routeChangeSuccess', function(scope, next, current){
if($cacheFactory.get('myurl')
/* dont use overlay here */
else
/* use overlay*/ });
但问题是,实际上,我没有找到任何方法让$cacheFactory与$routeProvider工作
当我想在访问服务器时隐藏模板时,我使用以下方法。
DOM (Add to top off template)
<div ng-show="showLoading" class="loading"><h4>Loading…</h4></div>
(缩小)
.loading,.loading:before{position:fixed;top:0;left:0}.loading:before,.loading:not(:required):after{content:'';display:block}.loading{z-index:999;height:2em;width:2em;overflow:show;margin:auto;bottom:0;right:0}.loading:before{width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
$scope.showLoading = false;
$scope.getData = function(){
$scope.showLoading = true;
//Make server trip
//Once data is returned, set showLoading back to false
$scope.showLoading = false;
}
相关文章:
- 浏览器是否持久缓存脚本元素的编译版本
- 是否可以缓存可下载的文件,并在XHR和非XHR请求之间共享该缓存
- jqGrid 或 jQuery 是否具有在字符串中缓存 DOM 更改的功能?
- 在 html 文件中包含无缓存元标记是否也会阻止缓存该 html 文件中链接的 js 和 css 文件
- 是否可以在不将其添加到DOM的情况下预加载和缓存视频文件
- Android上的初始pageYOffset值(是否缓存?)
- Mobile Safari是否清理DOM应用程序缓存?何时清理
- Angular 模板缓存是否在应用程序之间共享?是不是坚持不懈
- 是否可以缓存具有指向动态JavaScript的链接的HTML页面
- 检查对象是否适合浏览器缓存
- 我怎么知道$http响应是否来自缓存 - Angular
- 杰奎里 .Load(),它是否缓存文档
- 浏览器缓存是否知道javascript xmlhttp请求
- 浏览器是否缓存下载的javascript
- 服务工作线程是否可以缓存 POST 请求
- Javascript:检测是否缓存了请求的文件,如果存在较新版本,则删除缓存
- 是否缓存了通过拉斐尔.js创建的画布元素
- 如果路径中有一个querystring, Firefox是否缓存javascript并在没有请求的情况下使用它?
- 如果重复多次,JavaScript是否缓存/优化代码
- 浏览器是否缓存内联Javascript,如果是,如何强制重新加载