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 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
javascript canvas API内容整理
Feb 16 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
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
关于ES6尾调用优化的使用
2020/09/11 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python命令 -u参数用法解析
2019/10/24 Python
Django中的session用法详解
2020/03/09 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
环保建议书100字
2014/05/14 职场文书
工作目标责任书
2014/07/23 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
创先争优个人总结
2015/03/04 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python