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 相关文章推荐
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
js实现计时器秒表功能
Dec 16 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
微信小程序实现watch监听
Jun 04 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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python实现飞机大战微信小游戏
2020/03/21 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
简历上的自我评价怎么写
2014/01/28 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
骨干教师培训方案
2014/05/06 职场文书
学生安全责任书范本
2014/07/24 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python