AngularJS入门教程之Cookies读写操作示例  更新时间:2016年11月02日 11:03:18   作者:Rongbo_J   这篇文章主要介绍了AngularJS的Cookies读写操作,结合实例形式分析了ngCookies模块与get和put方法进行cookie读写操作的相关实现技巧,需要的朋友可以参考下 本文实例讲述了AngularJS的Cookies读写操作。分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: 然后將ngCookies模块注入到我们自定义的模块中: var cookiesMod = angular.module(“cookiesMod”,[‘ngCookies’]); 这里我们需要把Cookies读写相关的服务$cookieStore注入到控制器中。通过$cookieStore的get和put方法进行读和写操作。 我们看一个完整的案例: tutorial08 获取Cookies信息 在页面加载时我们写入Cookies信息,cookie名为person,值为{name:”Rongbo_J”,age:23},点击按钮获取cookie信息并以对话框的形式弹出。 接下来看一下效果: AngularJS源码可点击此处本站下载。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: angular中的cookie读写方法 详解Angular操作cookies方法 Angularjs cookie 操作实例详解 Angular.js与node.js项目里用cookie校验账户登录详解 Angularjs之如何在跨域请求中传输Cookie的方法 Angular ng-animate和ng-cookies用法详解 AngularJs中$cookies简单用法分析 AngularJS Cookies 相关文章 angularJs中orderBy筛选以及filter过滤数据的方法 今天小编就为大家分享一篇angularJs中orderBy筛选以及filter过滤数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能 ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。本文先从基本概念入手,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧 2019-04-04 Angular2中如何使用ngx-translate进行国际化 本篇文章主要介绍了Angular2中使用ngx-translate进行国际化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 Angular 组件之间的交互的示例代码 这篇文章主要介绍了Angular 组件之间的交互的示例代码,根据数据的传递方向,分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。非常具有实用价值,需要的朋友可以参考下 2018-03-03 AngularJS实现的2048小游戏功能【附源码下载】 这篇文章主要介绍了AngularJS实现的2048小游戏,可实现通过键盘W、S、A、D键控制上下左右移动进行游戏的功能,涉及AngularJS页面元素动态操作及数值运算等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下 2018-01-01 详解Angular组件之生命周期(二) Angular本身监督所有Angular组件和指令的生命周期 。为了在开发应用程序时顺利进行,您必须了解结果的生命周期。组件是任何Angular应用程序的主要构建块。因此,必须了解它们才能理解组件生命周期的处理步骤。只有这样才能在应用程序的开发中实现。 2021-05-05 angularjs中的e2e测试实例 这篇文章主要介绍了angularjs中的e2e测试实例,本文使用Protractor来完成e2e测试,需要的朋友可以参考下 2014-12-12 AngularJS ng-bind-template 指令详解 本文注意介绍AngularJS ng-bind-template 指令,这里把相关资料整理了一下,并附实例代码,有需要的小伙伴可以参考下 2016-07-07 AngularJS路由切换实现方法分析 这篇文章主要介绍了AngularJS路由切换实现方法,结合具体实例形式分析了AngularJS路由切换的实现步骤与相关操作技巧,需要的朋友可以参考下 2017-03-03 ionic3实战教程之随机布局瀑布流的实现方法 这篇文章主要给大家介绍了关于ionic3实战教程之随机布局瀑布流的实现方法,文中通过示例代码和图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-12-12 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • angular中的cookie读写方法
  • 详解Angular操作cookies方法
  • Angularjs cookie 操作实例详解
  • Angular.js与node.js项目里用cookie校验账户登录详解
  • Angularjs之如何在跨域请求中传输Cookie的方法
  • Angular ng-animate和ng-cookies用法详解
  • AngularJs中$cookies简单用法分析
张贴在3