快捷導(dǎo)航

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

更新時(shí)間：2018年04月18日 11:49:34 作者：EpicTrollSHX

本文講一下Angular中動(dòng)畫(huà)應(yīng)用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

ng-animate

本文講一下Angular中動(dòng)畫(huà)應(yīng)用的部分。

首先，Angular本生不提供動(dòng)畫(huà)機(jī)制，需要在項(xiàng)目中加入Angular插件模塊ngAnimate才能完成Angular的動(dòng)畫(huà)機(jī)制，Angular也不提供具體的動(dòng)畫(huà)樣式，所以說(shuō)，它的自由度和可定制性挺大的。

那么，剛開(kāi)始需要在項(xiàng)目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。

在項(xiàng)目的js入口文件app.js中，新建項(xiàng)目模塊，并且添加所依賴(lài)的模塊ng-Animate(有其他需要的模塊的話也可以引入，順序沒(méi)關(guān)系)

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

這里中間插入一句，建議Angular中的依賴(lài)注入用如下模式，在ads、bds或者其他的前端自動(dòng)化工具打包壓縮后不會(huì)產(chǎn)生問(wèn)題，因?yàn)閮H僅通過(guò) 給function傳參的形式注入依賴(lài)，Angular是會(huì)對(duì)注入的變量名有嚴(yán)格的要求（如$scope變量名在控制器中注入時(shí)變量名只能寫(xiě)$scope）：

//控制器.js、指令.js、過(guò)濾器.js的依賴(lài)注入建議都用這種方式寫(xiě)
//這是ui-route的配置，在app.js
demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
 // your code.
}]);

好了，回到正題上。引入了ngAnimate之后，Angular的動(dòng)畫(huà)機(jī)制就能生效了。

Angular文檔中寫(xiě)到如下指令和支持的動(dòng)畫(huà)

那么，怎么使用呢? 本文拿ng-repeat這個(gè)指令來(lái)做個(gè)介紹，其他的一些指令使用方式幾乎相同，可類(lèi)推。

ng-repeat 主要是對(duì)一個(gè)list的展示，這些元素是是被創(chuàng)建出來(lái)加入到DOM結(jié)構(gòu)中去的，那么，它的動(dòng)畫(huà)過(guò)程為：

創(chuàng)建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默認(rèn)狀態(tài)

默認(rèn)狀態(tài) -> .ng-leave -> .ng-leave-active -> 銷(xiāo)毀元素

所以可以通過(guò)設(shè)置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的樣式，加上css3的動(dòng)畫(huà)來(lái)顯示出動(dòng)畫(huà)，如：

<!-- 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;
}
/*動(dòng)畫(huà)開(kāi)始前*/
.item.ng-enter{
 opacity:0;
}
/*動(dòng)畫(huà)過(guò)程*/
.item-ng-enter-active{
 opacity:1;
}

這樣的效果是對(duì)所有元素同時(shí)應(yīng)用，可能實(shí)際運(yùn)用中需要有一個(gè)先后的漸變出現(xiàn)的效果，這時(shí)候可以設(shè)置ng-enter-stagger來(lái)實(shí)現(xiàn).

/*不同時(shí)出現(xiàn)*/

.item.ng-enter-stagger {

 transition-delay:0.5s;

 transition-duration:0s;

}

同樣的，這些angular animate提供的動(dòng)畫(huà)的class也可以應(yīng)用到頁(yè)面切換中去。自定義動(dòng)畫(huà)（基于class）

在添加移除class時(shí)自定義動(dòng)畫(huà)

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

如果通過(guò)寫(xiě)css的方式還無(wú)法滿足需求，當(dāng)然，還可以通過(guò)JS的方式來(lái)控制動(dòng)畫(huà)，下面的代碼你可以理解為是一個(gè)模版

/* CLASS 是需要應(yīng)用的class名，handles是支持的操作，如下圖所示*/
/* 這里如果是應(yīng)用在ui-view 的class上，模版會(huì)疊加(坑)*/
demoApp.animation('.classname',function(){
return {
 'handles':function(element,className,donw){
  //... your code here
  //回調(diào)
  return function(cancelled){
  // alert(1);
  }
 }
 }
})

支持的操作:

ng-cookies

$cookies[name] = value;

這個(gè)是angular設(shè)置cookies方法

$cookieStore
提供一個(gè)被session cookies支持的鍵值對(duì)（字符串-對(duì)象）存儲(chǔ)。被存入和取出的對(duì)象將自動(dòng)通過(guò)angular的toJson/fromJson進(jìn)行序列化/反序列化。

$cookies
提供瀏覽器cookies的讀/寫(xiě)訪問(wèn)操作。

這兩個(gè)都要引入ngCookies模塊才能使用，這個(gè)模塊在1.4版本之后就有了

從源碼中得知$cookieStore返回了三個(gè)方法get put remove 他們分別用toJson/fromJson進(jìn)行序列化/反序列化

簡(jiǎn)單的寫(xiě)了幾個(gè)例子來(lái)測(cè)試下

<!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");
   //設(shè)置過(guò)期日期
   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>

其實(shí)平時(shí)我們這樣就可以把自己需要的cookies設(shè)置進(jìn)去

$cookies.name = 'autumnswind';

但是當(dāng)我們要設(shè)置一個(gè)有效時(shí)間的時(shí)候我們就用這樣的方法把它設(shè)置進(jìn)去

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

我們還可以進(jìn)行刪除等操作

$cookieStore.remove("name");

補(bǔ)充:

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]這個(gè)出錯(cuò)提示具體到題主的情況，意思是指數(shù)組中有2個(gè)以上的相同數(shù)字。ngRepeat不允許collection中存在兩個(gè)相同Id的對(duì)象

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.
對(duì)于數(shù)字對(duì)象來(lái)說(shuō)，它的id就是它自身的值，因此，數(shù)組中是不允許存在兩個(gè)相同的數(shù)字的。為了規(guī)避這個(gè)錯(cuò)誤，需要定義自己的track by表達(dá)式。例如：

item in items track by item.id或者item in items track by fnCustomId(item)。
嫌麻煩的話，直接拿循環(huán)的索引變量$index來(lái)用item in items track by $index

自定義服務(wù)的區(qū)別:

factory()----函數(shù)可以返回簡(jiǎn)單類(lèi)型、函數(shù)乃至對(duì)象等任意類(lèi)型的數(shù)據(jù) 一般最為常用
service()-----函數(shù)數(shù)組、對(duì)象等數(shù)據(jù)
factory和service不同之處在于，service可以接收一個(gè)構(gòu)造函數(shù)，當(dāng)注入該服務(wù)時(shí)通過(guò)該函數(shù)并使用new來(lái)實(shí)例化服務(wù)對(duì)象

constant()----value()方法和constant()方法之間最主要的區(qū)別是，常量可以注入到配置函數(shù)中，而值不行，value可與你修改，constant不能修改

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: