Angular ng-animate和ng-cookies用法详解
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文档中写到如下指令和支持的动画
那么，怎么使用呢? 本文拿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);
}
}
}
})
支持的操作:
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不能修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- AngularJS入门教程之Cookies读写操作示例
相关推荐
-
AngularJS入门教程之Cookies读写操作示例
本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><
-
angular中默认路由的理解用法详解
目录 0.前言 1.路由的功能及原理 2.默认路由的使用 0.前言 前一段时间折腾angular的路由折腾的够呛, 这篇文章简单介绍一下自己的理解及用法. 1.路由的功能及原理 一开始并不理解路由的存在,因为学习html的时候,访问模式是下面这样子: 也就是网址会直接访问到我们的页面.那这样有不好吗?或者说有什么问题吗?一个小demo确实没有什么问题?但是设想两个情景. 情景1:在一个功能/页面的的前提下有很多子功能或者子页面.我们这个时候可能会多建一个文件夹来区分这些功能或者页面.越多的话越难
-
Angular 中 select指令用法详解
最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-
-
angular *Ngif else用法详解
Angular 中常用的指令有用来遍历的 *ngFor .控制元素显示隐藏的 *ngIf,今天学习一下 *ngIf 这个常用的指令. NgIf 指令 ngIf 指令用于根据表达式的值,在指定位置渲染then 或 else 模板的内容. then 模板除非绑定到不同的值,否则默认是 ngIf 指- 令关联的内联模板. else 模板除非绑定对应的值,否则默认是 null. 简单形式 <div *ngIf="condition">...</div> <!--A
-
Require.js的基本用法详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul
-
JS库之Waypoints的用法详解
一款用于捕获各种滚动事件的插件?Waypoints.同时Waypoints还支持固定元素和无限滚动的功能,功力十分强大. 一.最简易的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waypoints的最简单使用</title> <!-- 定义css样式 --> <style>
-
Python3网络爬虫中的requests高级用法详解
本节我们再来了解下 Requests 的一些高级用法,如文件上传,代理设置,Cookies 设置等等. 1. 文件上传 我们知道 Reqeuests 可以模拟提交一些数据,假如有的网站需要我们上传文件,我们同样可以利用它来上传,实现非常简单,实例如下: import requests files = {'file': open('favicon.ico', 'rb')} r = requests.post('http://httpbin.org/post', files=files) print
-
Python3爬虫中Selenium的用法详解
Selenium是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaScript动态渲染的页面来说,此种抓取方式非常有效.本节中,就让我们来感受一下它的强大之处吧. 1. 准备工作 本节以Chrome为例来讲解Selenium的用法.在开始之前,请确保已经正确安装好了Chrome浏览器并配置好了ChromeDriver.另外,还需要正确安装好Python的Selenium库,详细的安装和配置过程
-
python爬虫---requests库的用法详解
requests是python实现的简单易用的HTTP库,使用起来比urllib简洁很多 因为是第三方库,所以使用前需要cmd安装 pip install requests 安装完成后import一下,正常则说明可以开始使用了. 基本用法: requests.get()用于请求目标网站,类型是一个HTTPresponse类型 import requests response = requests.get('http://www.baidu.com')print(response.status_c
-
ASP.NET Core中Cookie验证身份用法详解
目录 添加配置 ASP.NETCore1.x ASP.NETCore2.x 创建身份认证Cookie ASP.NETCore1.x ASP.NETCore2.x Signingout(登出) ASP.NETCore1.x ASP.NETCore2.x 服务端变化反馈 ASP.NETCore1.x ASP.NETCore2.x Cookie设置选项 ASP.NETCore1.x ASP.NETCore2.x 持久Cookie ASP.NETCore1.x ASP.NETCore2.x 绝对到期时间
-
Oracle中游标Cursor基本用法详解
查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL