DDR爱好者之家

Angular ng-animate和ng-cookies用法详解
站长资源 2024/11/26 佚名
77 1538
DDR爱好者之家 Design By 杰米

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用法详解

那么，怎么使用呢"htmlcode"> 

<!-- 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="/UploadFiles/2021-04-02/angular.min.js">


其实平时我们这样就可以把自己需要的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不能修改


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米