Angular ng-animate和ng-cookies用法详解
前端之家收集整理的这篇文章主要介绍了
Angular ng-animate和ng-cookies用法详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_4040@ng-animate
@H
4040@本文讲一下Angular中动画应用的部分。
@H404_0@首先，Angular本生不提供动画机制，需要在项目中加入Angular
插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。
@H_
404_0@那么，刚开始需要在项目的入口html
文件中引入Angular框架(angular.js)，然后引入angular.animate.js。
@H_
404_0@在项目的js入口
文件app.js中，新建项目模块，并且
添加所依赖的模块ng-Animate(有其他需要的模块的话也可以引入，顺序没关系)
<div class="jb51code">
<pre class="brush:js;">
var demoApp = angular.module('demoApp',['ngAnimate','ui.router']);
@H_
404_0@这里中间插入一句，建议Angular中的依赖注入用如下模式，在ads、bds或者其他的前端
自动化工具打包压缩后不会产生问题，因为仅仅通过 给function传参的形式注入依赖，Angular是会对注入的变量名有严格的要求（如$scope变量名在控制器中注入时变量名只能 写$scope）：
@H_
404_0@好了，回到正题上。引入了ngAnimate之后，Angular的动画机制就能生效了。
@H_
404_0@Angular文档中写到如下指令和
支持的动画
@H_
404_0@那么，怎么使用呢? 本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
@H_
404_0@ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：
@H_
404_0@创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态
@H_
404_0@默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
@H_
404_0@所以可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式，
加上css3的动画来
显示出动画，如：
@H_
404_0@这样的
效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的
效果，这时候可以设置ng-enter-stagger来实现.
.item.ng-enter-stagger {
transition-delay:0.5s;
transition-duration:0s;
}
@H_
404_0@同样的，这些angular animate提供的动画的class也可以应用到
页面切换中去。
自定义动画（基于class）
@H_
404_0@在
添加移除class时
自定义动画
@H_404_0@.class-add -> .class-add-active -> .class
@H_
404_0@如果通过写css的方式还无法满足需求，当然，还可以通过JS的方式来控制动画，下面的
代码你可以理解为是一个模版
支持的操作，如下图所示*/
/* 这里如果是应用在ui-view 的class上，模版会叠加(坑)*/
demoApp.animation('.classname',function(){
return {
'handles':function(element,className,donw){
//... your code here
//回调
return function(cancelled){
// alert(1);
}
}
}
})
@H_
404_0@
支持的操作:
@H_
404_0@
ng-cookies
@H_
404_0@这个是angular设置cookies
方法
@H_
404_0@$cookieStore
提供一个被session cookies
支持的键值对（字符串-对象）存储。被存入和取出的对象将
自动通过angular的toJson/fromJson进行序列化/反序列化。
@H_
404_0@$cookies
提供浏览器cookies的读/写访问操作。
@H_
404_0@这两个都要引入ngCookies模块才能使用，这个模块在1.4版本之后就有了
@H_
404_0@从源码中得知$cookieStore返回了三个
方法get put remove 他们分别用toJson/fromJson进行序列化/反序列化
@H_
404_0@简单的写了几个例子来测试下
<
Meta charset="UTF-8">
{{title}}
