AngularJS入门教程之Cookies读写操作示例


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS的Cookies读写操作。分享给大家供大家参考,具体如下:

虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js:

<script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>

然后??gCookies模块注入到我们自定义的模块中:

var cookiesMod = angular.module("cookiesMod",['ngCookies']);

这里我们需要把Cookies读写相关的服务$cookieStore注入到控制器中。通过$cookieStore的get和put方法进行读和写操作

我们看一个完整的案例:

<!DOCTYPE html>
<html ng-app="cookiesMod">
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>
  <title>tutorial08</title>
</head>
<body ng-controller="CookiesController" ng-init="init()">
<button ng-click="getInfo()">获取Cookies信息</button>
</body>
<script>
  var cookiesMod = angular.module("cookiesMod",['ngCookies']);
  cookiesMod.controller("CookiesController",function($scope,$log,$cookieStore){
    $scope.init = function()
    {
      $log.info("init functionn");
      $cookieStore.put("person",{name:"Rongbo_J",age:23});
    }
    $scope.getInfo = function()
    {
      var person = $cookieStore.get("person") ;
      alert("name : " + person.name +" , "+ "age : " + person.age);
    }
  });
</script>
</html>

在页面加载时我们写入Cookies信息,cookie名为person,值为{name:"Rongbo_J",age:23},点击按钮获取cookie信息并以对话框的形式弹出。

接下来看一下效果:

AngularJS入门教程之Cookies读写操作示例

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 #Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 #Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 #Javascript
快速解决js中window.location.href不工作的问题
Nov 02 #Javascript
javascript创建对象的3种方法
Nov 02 #Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 #Javascript
You might like
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
php去除重复字的实现代码
2011/09/16 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue 封装面包屑组件教程
2020/11/16 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python安装教程
2018/02/28 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
PyQt实现计数器的方法示例
2021/01/18 Python
小区消防演习方案
2014/02/21 职场文书
个人融资协议书
2014/10/02 职场文书
横空出世观后感
2015/06/09 职场文书
工作收入证明模板
2015/06/12 职场文书
高中历史教学反思
2016/02/19 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs