夺命雷公狗—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>

效果如下所示:

时间: 2024-10-12 17:14:27

夺命雷公狗—angularjs—16—angularjs里面的缓存的相关文章

夺命雷公狗-----React---11--添加类和样式

<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="

夺命雷公狗—angularjs—6—单条数据的遍历

我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=&q

夺命雷公狗ThinkPHP项目之----商城8商品品牌管理

本章的主要目标是为了对商品品牌进行CRUD(增删改查)操作. 我们在写的时候就要了解业务逻辑,也就是了解表结构 每个字段代表什么含义,为什么是这个类型的 logo:保存的是图片,一般是分两个途径来保存的, 1.保存图片的本身,保存在目录之下 2.将图片的路径保存到数据表中 我们先创建一个名字为BrandController的控制器,和在view视图里面创建一个Brand的文件夹来进行存放模版文件,如下图所示: 然后将add里面的css和图片路径该下即可代码如下: <!DOCTYPE html P

夺命雷公狗ThinkPHP项目之----商城10商品属性管理

我们一般做项目前就要分析业务逻辑先,这次也不例外. attr_type:是指属性的类型,有唯一,单选和多选之分 唯一属性,是指用户在购买商品时,可以看到的扩展属性如下图所示: 单选属性,是指用户在购买的时候,不需要选择的扩展属性,否则就无法购买,如下所示: 多选和单选是对应的,但是可以选择多个,但是单选的只能选择一个,否则就无法购买. attr_input_type:是指属性的输入方式,有文本框,下拉列表和文本域之分,如下图所示: attr_value:是指如果属性是下拉形式的,应该提供可选值.

夺命雷公狗---微信开发23----客服消息接口基础和推送文本

我们这边课程里面一共用到了三个文件,分别是WeChat.class.php和common.php以及index.php 我们在写这个功能之前也要学会查手册,手册我们可以在微信开发这里找到,如下所示: 点击进去后我们将会看到客服接口,我们可以点击下进去看看里面有什么动动 这里有一个发送文本消息的,我们点击进去看下 这里很明显就看到文本消息是通过一个json数据来进行实现的,废话不多说,开工 这里我们先来写一个WeChat.php的文件,这里作用主要适用于封装一个CURL上传类的,代码如下所示: <

夺命雷公狗---微信开发17----自定义菜单的事件推送,响应菜单的CLICK

废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; define("TOKEN", "twgdh"); $wechatObj = new wechatCallbackapiTest(); //当接入成功后,请注销这句话,否则,会反复验证. //$wechatObj->valid();

夺命雷公狗---linux之centos的安装

由于要玩node.js了,所以还是来复习下linux系统才行,所以夺命雷公狗分享两套安装linux的方法,这是centos的安装方法,,, 管理员默认帐号为:root,密码则是刚才您输入的那个...

夺命雷公狗---linux之红帽的安装

夺命雷公狗分享的第二套安装linux方法是RadHad的安装方法,,, 点击然后就自动重启了

夺命雷公狗---微信开发48----获取用户地理位置接口(3)

这节课程我们来做一个游戏,这个游戏的名字叫“寻找美女做老婆”, 用户该游戏后,每隔5s(秒)会收到他距离未来老婆的信息,如果找到美女后,输入“老婆”即可成功. 这次我们涉及到一个车联网API,我们先来看下他在哪,张成什么样. http://lbsyun.baidu.com/index.php?title=car 找到接口说明,里面有一个测距,如下所示: 我们可以看到这就是他的接口 参数说明以及返回的参数如下所示: 很明显他就是返回一个XML或者是json格式的数据,默认返回的是一个XML格式的数

夺命雷公狗---微信开发47----获取用户地理位置接口(2)

我们现在要做的是查找距离最近的“肯德基”,我们需要通过百度提供的LBS云服务定位距离您最近的肯德基,该程序需要到LBS后台进行相关设置,然后在完成程序 用户在客户端输入“肯德基”公众号就会自动回复距离用户最近的”肯德基“ 废话不多说,我们先到http://developer.baidu.com/里面找到LBS云------再到服务接口--------再到LBS云,如下图所示: 点击进来后,我们首先要获取一个密钥, 然后出了红色框部分填下数据即可,别的地方都不用改,直接提交即可 上面的0.0.0.