Angularng-animate与ng-cookies如何在项目内使用

来源：动视网责编：小采时间：2020-11-27 19:39:49

Angularng-animate与ng-cookies如何在项目内使用

Angularng-animate与ng-cookies如何在项目内使用:这次给大家带来Angular ng-animate与ng-cookies如何在项目内使用，Angular ng-animate与ng-cookies在项目内使用的注意事项有哪些，下面就是实战案例，一起来看一下。ng-animate本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画

推荐度：

点击下载本文 文档为doc格式

导读Angularng-animate与ng-cookies如何在项目内使用:这次给大家带来Angular ng-animate与ng-cookies如何在项目内使用，Angular ng-animate与ng-cookies在项目内使用的注意事项有哪些，下面就是实战案例，一起来看一下。ng-animate本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画

如果通过写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);
 }
 }
 }
})

支持的操作:

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用法：

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

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不能修改

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！