夺命雷公狗—angularjs—16—angularjs里面的缓存
强大的angularjs也给我们预留了一套他的缓存机智，这样在某个程度上来说还是可以做到减轻一点服务器压力的。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/amazeui.min.css">
<script src="js/jq2.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div class="am-g" style="width:500px;" ng-controller="app">
<div class=" col-md-8 col-sm-centered">
<form class="am-form">
<fieldset class="am-form-set">
<input type="text" placeholder="请输入要缓存的内容" ng-model="tdesc">
</fieldset>
<button type="submit" class="am-btn am-btn-primary am-btn-block" ng-click="instcache()">设置缓存</button>
<button type="submit" class="am-btn am-btn-secondary am-btn-block" ng-click="selcache()">查看缓存</button>
<button type="submit" class="am-btn am-btn-danger am-btn-block" ng-click="delcache()">删除缓存</button>
</form>
<p>{{cachemess}}</p>
</div>
</div>
</body>
<script>
var app = angular.module('myapp',[]);
app.service('cache',function($cacheFactory){
return $cacheFactory('test');//这里的test是随便取的，就有点类似json里面的第一个数据的名字一样
});
app.controller('app',function($scope,cache){
//添加缓存
$scope.instcache = function(){
cache.put('lists',$scope.tdesc);
}
//查找缓存
$scope.selcache = function(){
$scope.cachemess = cache.get('lists');
}
//删除缓存
$scope.delcache = function(){
cache.remove('lists'); //这里是直接删除的
$scope.cachemess = cache.get('lists');//加上这句之后他就可以点击删除缓存后直接看到下面的最新缓存
//cache.removeAll(); //删除所有的
//cache.destroy();//破坏的
}
});
</script>
</html>
效果如下所示：
夺命雷公狗—angularjs—16—angularjs里面的缓存的更多相关文章
- 夺命雷公狗-----React---12--添加类和样式
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗-----React---11--添加css样式的方法
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗—angularjs—6—单条数据的遍历
我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...
- 夺命雷公狗-----React---10--组建嵌套进行数据遍历
先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 夺命雷公狗-----React---9--map数据的遍历
比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...
- 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定
首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 夺命雷公狗-----React---7--组建的状态props和state
props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...
- 夺命雷公狗-----React---6--props多属性的传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 夺命雷公狗-----React---5--props对象的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 夺命雷公狗-----React---4--props变量的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- 框架，公共模块，unified思想
最近两周一直在加班加点refactor代码,贡献了2014年最后一个周末和2015年元旦三天假期,终于赶在了sprint结束之前完成. 可见,这个sprint做的并不理想! 项目逻辑本身并不复杂,从数 ...
- ArcGIS Engine开发之旅08--和查询相关的对象和接口
原文:ArcGIS Engine开发之旅08--和查询相关的对象和接口 查询在GIS领域应该是一个很频繁的操作,在GIS中除了具有属性查询(和其他关系型数据库的查询类似),还提供了空间查询.在介绍查询 ...
- 与Perl兼容的正则表达式函数
<?php $str = "abc_ABC_123abc"; $patt = '/^abc(.*?)abc$/'; //有一个模式单元就会多一个存储 $arr = null; ...
- nginx学习
nginx源码学习是一个痛苦又快乐的过程,下面列出了一些nginx的学习资源. 首先要做的当然是下载一份nginx源码,可以从nginx官方网站下载一份最新的. 看了nginx源码,发现这是一份完全没 ...
- Power-BI助顾得医药济世康民
公司简介成立于 2011 年 9 月 24 日,是一家主要以医院销售为主,集批发.配送.售后服务于一体的商业公司.现有药品储备面积 16000 平方米,开户医院 52 家,营销网络辐射山西省境内部分县 ...
- Android --Search界面样式
Lay_Weight 权重属性的使用 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- 作业一直"执行"
背景:一个作业有7个步骤,前面的步骤成功/失败都转到下一步,直至最后退出,作业计划是每天早上8点执行.步骤中的语句是例行检查脚本,之前的历史记录都是一分钟内完成.此次重启数据库服务器后,检查发现此作业 ...
- WPF 应用程序使用 Multilingual App Toolkit
应用程序支持多语言,使用 Multilingual App Toolkit是一个不错的解决方案. Multilingual App Toolkit下载地址: https://visualstudiog ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- swiper有时候不能自动滚动的问题
<script type="text/javascript"> $(function(){ var swiper = new Swiper('.swiper-conta ...