当前位置: 首页 > 编程笔记 >

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

傅自明
2023-03-14
本文向大家介绍AngularJS入门教程之Cookies读写操作示例,包括了AngularJS入门教程之Cookies读写操作示例的使用技巧和注意事项,需要的朋友参考一下

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

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

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

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

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源码可点击此处本站下载

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

 类似资料:
  • 本文向大家介绍AngularJS入门教程之模块化操作用法示例,包括了AngularJS入门教程之模块化操作用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS模块化操作用法。分享给大家供大家参考,具体如下: 在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差。通常的做法都是將处理业务逻辑

  • 本文向大家介绍AngularJS入门教程之AngularJS指令,包括了AngularJS入门教程之AngularJS指令的使用技巧和注意事项,需要的朋友参考一下 熟悉HTML的朋友都知道,HTML有很多属性。比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS

  • 本文向大家介绍AngularJS入门教程之AngularJS 模板,包括了AngularJS入门教程之AngularJS 模板的使用技巧和注意事项,需要的朋友参考一下 是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。 一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这

  • 本文向大家介绍AngularJS入门教程之AngularJS模型,包括了AngularJS入门教程之AngularJS模型的使用技巧和注意事项,需要的朋友参考一下 相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与Angular

  • 本文向大家介绍AngularJS入门教程之AngularJS表达式,包括了AngularJS入门教程之AngularJS表达式的使用技巧和注意事项,需要的朋友参考一下 表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。 AngularJS

  • AngularJS 中文社区是一个专业的 AngularJS 中文开源技术社区,致力于 AngularJS 的技术学习、交流和研究。