Angular ng-animate和ng-cookies用法详解


Posted in Javascript onApril 18, 2018

ng-animate

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

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

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

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

var demoApp = angular.module('demoApp', ['ngAnimate','ui.router']);

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

//控制器.js、指令.js、过滤器.js的依赖注入建议都用这种方式写
//这是ui-route的配置,在app.js
demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
 // your code.
}]);

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

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

Angular ng-animate和ng-cookies用法详解

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

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

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

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

所以可以通过设置.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;
}

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

/*不同时出现*/

.item.ng-enter-stagger {

 transition-delay:0.5s;

 transition-duration:0s;

}

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

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

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

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

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

支持的操作:

Angular ng-animate和ng-cookies用法详解

ng-cookies

$cookies[name] = value;

这个是angular设置cookies方法

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

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

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

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

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

<!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>

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

$cookies.name = 'autumnswind';

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

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

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

$cookieStore.remove("name");

补充:

ng-repeat-track by用法:

<div ng-repeat="links in slides">
 <div ng-repeat="link in links track by $index">{{link.name}}</div>
</div>

Error: [ngRepeat:dupes]这个出错提示具体到题主的情况,意思是指数组中有2个以上的相同数字。ngRepeat不允许collection中存在两个相同Id的对象

For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.
对于数字对象来说,它的id就是它自身的值,因此,数组中是不允许存在两个相同的数字的。为了规避这个错误,需要定义自己的track by表达式。例如:

item in items track by item.id或者item in items track by fnCustomId(item)。
嫌麻烦的话,直接拿循环的索引变量$index来用item in items track by $index

自定义服务的区别:

factory()----函数可以返回简单类型、函数乃至对象等任意类型的数据 一般最为常用
service()-----函数数组、对象等数据
factory和service不同之处在于,service可以接收一个构造函数,当注入该服务时通过该函数并使用new来实例化服务对象

constant()----value()方法和constant()方法之间最主要的区别是,常量可以注入到配置函数中,而值不行,value可与你修改,constant不能修改

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

Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
react redux入门示例
Apr 19 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
JS实现的base64加密解密操作示例
Apr 18 #Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 #Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 #Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
Angular 如何使用第三方库的方法
Apr 18 #Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
js创建数组的简单方法
2016/07/27 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Python基础知识_浅谈用户交互
2017/05/31 Python
python实现简易通讯录修改版
2018/03/13 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
股东授权委托书范本
2014/09/13 职场文书
优秀团队申报材料
2014/12/26 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
golang 接口嵌套实现复用的操作
2021/04/29 Golang
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL