详解Angular操作cookies方法

本文介绍了Angular操作cookies方法,分享给大家,具体如下:

ng-animate

var setCookie = function(name, value) {
         var Days = 30;
         var exp = new Date();
         exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
         document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
         //$cookies[name] = value;
        };

本文讲一下Angular中动画应用的部分。

这是用Javascript写的方法去设置

首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。

var getCookie = function(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
   return unescape(arr[2]);
  else
   return null;
 }

那么,刚开始需要在项目的入口html文件中引入Angular框架(angular.js),然后引入angular.animate.js。

这是用Javascript写的方法去读取

在项目的js入口文件app.js中,新建项目模块,并且添加所依赖的模块ng-Animate(有其他需要的模块的话也可以引入,顺序没关系)

其实angular也有相应的方法去操作cookies的,加载这两个module的依赖文件

var demoApp = angular.module('demoApp', ['ngAnimate','ui.router']);
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>

这里中间插入一句,建议Angular中的依赖注入用如下模式,在ads、bds或者其他的前端自动化工具打包压缩后不会产生问题,因为仅仅通过
给function传参的形式注入依赖,Angular是会对注入的变量名有严格的要求(如$scope变量名在控制器中注入时变量名只能
写$scope):

源码是这样的

//控制器.js、指令.js、过滤器.js的依赖注入建议都用这种方式写
//这是ui-route的配置,在app.js
demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
 // your code.
}]);
function(a, b, c) {
  "use strict";
  b.module("ngCookies", ["ng"]).factory("$cookies", ["$rootScope", "$browser",
   function(a, d) {
    function e() {
     var a, e, f, i;
     for (a in h) k(g[a]) && d.cookies(a, c);
     for (a in g) e = g[a], b.isString(e) ? e !== h[a] && (d.cookies(a, e), i = !0) : b.isDefined(h[a]) ? g[a] = h[a] : delete g[a];
     if (i) {
      i = !1, f = d.cookies();
      for (a in g) g[a] !== f[a] && (k(f[a]) ? delete g[a] : g[a] = f[a], i = !0)
     }
    }
    var f, g = {},
     h = {},
     i = !1,
     j = b.copy,
     k = b.isUndefined;
    return d.addPollFn(function() {
     var b = d.cookies();
     f != b && (f = b, j(b, h), j(b, g), i && a.$apply())
    })(), i = !0, a.$watch(e), g
   }
  ]).factory("$cookieStore", ["$cookies",
   function(a) {
    return {
     get: function(c) {
      var d = a[c];
      return d ? b.fromJson(d) : d
     },
     put: function(c, d) {
      a[c] = b.toJson(d)
     },
     remove: function(b) {
      delete a[b]
     }
    }
   }
  ])
 }(window, window.angular) 

好了,回到正题上。引入了ngAnimate之后,Angular的动画机制就能生效了。

$cookies[name] = value;这个是angular设置cookies方法

Angular文档中写到如下指令和支持的动画

$cookieStore

澳门新葡亰赌995577 1

提供一个被session
cookies支持的键值对(字符串-对象)存储。被存入和取出的对象将自动通过angular的toJson/fromJson进行序列化/反序列化。

那么,怎么使用呢?
本文拿ng-repeat这个指令来做个介绍,其他的一些指令使用方式几乎相同,可类推。

$cookies

ng-repeat
主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为:

提供浏览器cookies的读/写访问操作。

创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态

这两个都要引入ngCookies模块才能使用,这个模块在1.4版本之后就有了

默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素

澳门新葡亰赌995577,从源码中得知$cookieStore返回了三个方法get put remove
他们分别用toJson/fromJson进行序列化/反序列化

所以可以通过设置.ng-enter(.ng-leave) 和
.ng-enter-active(.ng-leave-active)
的样式,加上css3的动画来显示出动画,如:

简单的写了几个例子来测试下

<!-- HTML片段 -->
<div ng-init="users = [1,2,3,4,5]"></div>
<input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
<ul>
<li class="item" ng-repeat="user in users | filter: u as result">
 {{user}}
</li>
</ul>
/* css片断 */
/*ng-repeat的元素*/
.item{
 -webkit-transition: all linear 1s;
 -o-transition: all linear 1s;
 transition: all linear 1s;
}
/*动画开始前*/
.item.ng-enter{
 opacity:0;
}
/*动画过程*/
.item-ng-enter-active{
 opacity:1;
}
<!DOCTYPE html>
<html ng-app="AutumnsWindsApp" ng-controller="aswController">

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
 <script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>

 <body>
  {{title}}
 </body>
 <script>
  var AutumnsWindsApp = angular.module('AutumnsWindsApp', ['ngCookies']);
  AutumnsWindsApp.controller('aswController', function($cookies, $cookieStore, $scope) {
   $cookies.name = 'autumnswind';
   $scope.title = "Hello, i'm autumnswind :)";
   $cookieStore.put("skill", "##");
   //删除cookies
   $cookieStore.remove("name");
   //设置过期日期
   var time = new Date().getTime() + 5000;
   $cookieStore.put("cookie", "Hello wsscat", {
    expires: new Date(new Date().getTime() + 5000)
   });

   $cookieStore.put("objCookie", {
    value: "wsscat cat cat",
    age: "3",
   }, {
    expires: new Date(new Date().getTime() + 5000)
   });
   console.log($cookies);
   console.log($cookies['objCookie']);
  })
 </script>
</html>

这样的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger来实现.

其实平时我们这样就可以把自己需要的cookies设置进去 

/*不同时出现*/

.item.ng-enter-stagger {

 transition-delay:0.5s;

 transition-duration:0s;

}
$cookies.name = 'autumnswind';

同样的,这些angular
animate提供的动画的class也可以应用到页面切换中去。自定义动画(基于class)

但是当我们要设置一个有效时间的时候我们就用这样的方法把它设置进去

 在添加移除class时自定义动画

var time = new Date().getTime() + 5000;
   $cookieStore.put("cookie", "Hello wsscat", {
    expires: new Date(new Date().getTime() + 5000)
   });

.class-add     ->   .class-add-active  ->   .class

我们还可以进行删除等操作

如果通过写css的方式还无法满足需求,当然,还可以通过JS的方式来控制动画,下面的代码你可以理解为是一个模版

$cookieStore.remove("name");
/* CLASS 是需要应用的class名,handles是支持的操作,如下图所示*/
/* 这里如果是应用在ui-view 的class上,模版会叠加(坑)*/
demoApp.animation('.classname',function(){
return {
 'handles':function(element,className,donw){
  //... your code here
  //回调
  return function(cancelled){
  // alert(1);
  }
 }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

支持的操作:

您可能感兴趣的文章:

澳门新葡亰赌995577 2