大家好，我是IT修真院鄭州分院王姣妍，一枚正直、純潔、善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) js任務(wù)中可能會使用到的知識點：
angularJS中的constant和$filter的用法
一、背景介紹
angular是什么：AngularJS 最初由Misko Hevery 和Adam Abrons于2009年開發(fā)， 是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性， 最為核心的是：MVC、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。。
constant，可以算作angular的全局常量，使用的時候只需要在控制器注入即可。
$filter，angular的過濾器，如果想要在控制器里面使用，也是注入，然后調(diào)用，而html中的數(shù)據(jù)過濾，直接鍵入過濾器名稱和對應(yīng)值即可。
二、知識剖析
constant
每當(dāng)搜索constant時候，總會連帶出現(xiàn)value的說明。
兩者都可以作為全局變量使用，但是有兩點不同：
1.value不可以在config里注入，但是constant可以。
2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要經(jīng)常使用的數(shù)據(jù)。
angular.module('myApp', [])
.constant('apiKey', '123123123')
.value('FBid','231231231')
.controller('myController',function($scope,apiKey,FBid){
$scope.a = apiKey;
$scope.b = FBid;
})
.config(function(apiKey) {
// 在這里apiKey將被賦值為123123123// 就像上面設(shè)置的那樣
})
.config(function(FBid) {
// 這將拋出一個錯誤，未知的provider: FBid
// 因為在config函數(shù)內(nèi)部無法訪問這個值
});
filter是用來格式化數(shù)據(jù)用的
基本原型
{{expression | filter}}
多個filter連用版
{{expression | filter1 | filter2}}
傳入?yún)?shù)版
{{expression | filter:1:2}}
AngularJS內(nèi)建了一些常用的filter：
1、格式化貨幣：
{{ 12 | currency}} //將12格式化為貨幣，默認(rèn)單位符號為 '$', 小數(shù)默認(rèn)2位
2、格式化日期
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//結(jié)果：2011-05-03 06:39:08
3、過濾數(shù)組：
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr | filter:'s'}} //查找含有有s的對象
4、將對象格式化成標(biāo)準(zhǔn)的JSON格式：
{{ {name:'Jack', age: 21} | json}}? //{"name":"Jack","age":"21"}
5、字符串，對象截?。?/p>
{{ "i love tank" | limitTo:6 }}//結(jié)果：i love
{{ "i love tank" | limitTo:-4 }}//結(jié)果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}//結(jié)果：[{"age":20,"id":10,"name":"iphone"}]
6、大小寫轉(zhuǎn)換：
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
7、數(shù)值類：
{{ 1.234567 | number:1 }} //結(jié)果：1.2
{{ 1234567 | number }} //結(jié)果：1,234,567
8、對象排序：
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr | orderBy:'id':true }}//根id降序排
{{arr | orderBy:'id' }}//根據(jù)id升序排
9、自定義filter方法。
三、常見問題
如何使用angular中constant和$filter
四、解決方案
html:
{{ type | ChangeType }}
js:
angular.module('App',[])
.controller('myCtr',function ($scope) {
$scope.type=2
? ? })
.constant('myConstant',[
{type :'0' ,name :'首頁banner'},
{type :'1 ',name :'找職位banner'},
{type :'2' ,name :'找精英banner'},
{type :'3' ,name:'行業(yè)大圖'}
])
.filter("ChangeType",function (myConstant) {
return function (a) {
for(var i=0;i
if(a==myConstant[i].type){
return myConstant[i].name;
}
}
}
})
想要顯示什么內(nèi)容，只需改變$scope.type的數(shù)字就可以了
五、編碼實戰(zhàn)
六、擴展思考
七、參考文獻(xiàn)
參考二：Filter用法詳解
八、更多討論
1、constant函數(shù)取值，和直接用常量名有什么區(qū)別
答：大多數(shù)情況直接用常量名，但是在angular中，使用constant的字段約定與后臺進(jìn)行數(shù)據(jù)交互的時候很方便，結(jié)構(gòu)更加清晰。constant()函數(shù)和直接使用常量名輸出的效果是一樣的，但函數(shù)可以動態(tài)的輸出不同的常量，在使用上要靈活、方便。
2、filter怎么去掉時間的??秒
答：{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
參數(shù)用來指定所要的格式，y M d h m s E 分別表示 年 月 日 時 分 秒 星期，你可以自由組合它們
3、什么情況下使用filter
答：常用的就是一個date的格式轉(zhuǎn)換，表格中進(jìn)行排序、還有大量的一些約定字段，使用自定義的filter。
八、
PPT鏈接：PPT
視頻鏈接：
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
