• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS入门教程之Cookies读写操作示例

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

作者:Rongbo_J 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs cookies,angularjs示例,angularjs,angularjs菜鸟教程,angularjs官网等相关知识,Rongbo_J 希望在学习及工作中可以帮助到您

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

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

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

</div>

然后將ngCookies模块注入到我们自定义的模块中:

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

</div>

这里我们需要把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>

</div>

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

接下来看一下效果:

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

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

</div>

您可能想查找下面的文章:

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

相关文章

  • 2017-05-30在AngularJS框架中处理数据建模的方式解析
  • 2017-05-30AngularJS ui-router (嵌套路由)实例
  • 2017-05-30AngularJs 弹出模态框(model)
  • 2017-05-30AngularJS基础知识
  • 2017-05-30AngularJS实践之使用NgModelController进行数据绑定
  • 2017-05-30Angularjs 滚动加载更多数据
  • 2017-05-30Angular.js跨controller实现参数传递的两种方法
  • 2017-05-30详解angularjs结合pagination插件实现分页功能
  • 2017-05-30AngularJS封装指令方法详解
  • 2017-05-30AngularJS基础 ng-disabled 指令详解及简单示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • angularjs学习笔记之完整的项目结构
    • 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
    • 对Angular.js Controller如何进行单元测试
    • 详解Angularjs 如何自定义Img的ng-load 事件
    • 如何利用AngularJS打造一款简单Web应用
    • angular2倒计时组件使用详解
    • AngularJs Injecting Services Into Controllers详解
    • AngularJS入门(用ng-repeat指令实现循环输出
    • 模板视图和AngularJS之间冲突的解决方法
    • Angular1.x自定义指令实例详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有