這里是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰(zhàn)】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【簡述angular中constant和$filter的用法】

【JS-7】簡述angular中constant和$filter的用法

大家好，我是IT修真院深圳分院第12期的學(xué)員韓鵬，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)JS任務(wù)7，深度思考中的知識點——簡述angular中constant和$filter的用法.

?

1.背景介紹

constant:? ??

? ? constant是用來設(shè)置常量的，constant(name,value)可以將一個已經(jīng)存在的變量值注冊為服務(wù)，通過依賴注入將其注入到應(yīng)用的其他部分中，其中，name為注冊的常量的名字，value為注冊的常量的值或?qū)ο蟆?lt;/p>

$filter:

? ? $filter是AngularJs 服務(wù)，$filter是過濾器，用來格式化數(shù)據(jù)用的。

?

2.知識剖析

AngularJs設(shè)置全局變量的方法：

? ? angularjs自身有兩種，設(shè)置全局變量的方法，在加上js的設(shè)置全局變量的方法，總共有三種。要實現(xiàn)的功能是，在ng-app中定義的全局變量，在不同的ng-controller里都可以使用。

? ? 1.通過var 直接定義global variable，這跟純js是一樣的。

? ? 2.用angularjs value來設(shè)置全局變量 。

? ? 3.用angularjs constant來設(shè)置全局變量 。

?

VALUE 和 CONSTANT 的區(qū)別：

? ? 1.value不可以在config里注入，但是constant可以。

? ? 2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要經(jīng)常使用的數(shù)據(jù)。

?

過濾器：$FILTER

? ? ng內(nèi)置了9種過濾器，分別是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數(shù))、lowercase(小寫)、uppercase(大寫)、number(數(shù)字)、orderBy(排序)。

?

FILTER的用法：

? ? filter是用來格式化數(shù)據(jù)用的?

? 基本原型?

{{expression | filter}}?

? 多個filter連用版?

{{expression | filter1 | filter2}}?

? 傳入?yún)?shù)版?

{{expression | filter:1:2}}

?

3.常見問題

? FILTER的實際應(yīng)用：

? ? 自定義filter

?

4.解決方案

? ? 自定義一個過濾器也相當(dāng)容易，僅僅需要在module中注冊一個新的filter工廠函數(shù)。工廠函數(shù)會返回一個新的過濾器函數(shù)，過濾器的輸入作為過濾器函數(shù)的第一個參數(shù)，其他過濾器的參數(shù)作為過濾器函數(shù)的附加參數(shù)傳入。

? ? 過濾器函數(shù)是一個純函數(shù)，這意味著給出相同的輸入?yún)?shù)總能得到相同的輸出結(jié)果，而不受外界狀態(tài)的影響（例如，angularjs的services）。根據(jù)這一點，angularjs才能做到僅僅當(dāng)輸入變化時才去執(zhí)行一次過濾器。

?

FILTER方法:

? 自定義過濾器：{{帶過濾數(shù)據(jù) |過濾器名：參數(shù)1：參數(shù)2：參數(shù)3.....}}

app.filter('過濾器名', function () {

return function (待過濾數(shù)據(jù), 參數(shù)....) {

......

return? 已過濾數(shù)據(jù);

}

?

5.代碼實戰(zhàn)

??Demo

?

6.拓展思考

有沒有其他自定義過濾方法？

在CONTROLLER方法內(nèi)定義一個方法：

控制器：（控制器名，控制器函數(shù){

......

自定義過濾函數(shù){

return function (待過濾數(shù)據(jù), 參數(shù)....) {

......

return? 已過濾數(shù)據(jù);

}

}）

?

7.參考文獻

?

參考一：angularJS constant和value

參考二：angularJS 自定義過濾器

參考三：AngularJS 過濾器——Runoob

參考四：AngularJS 的那些內(nèi)置九種過濾器

?

8.更多討論

?

Q1:日期格式化的方法還有哪幾種？

A1:

{{ now | date:'medium' }}<!-- Dec 3, 2016 10:43:51 AM -->

{{ now | date:'short' }}<!-- 12/3/16 10:43 AM -->

{{ now | date:'fullDate' }}<!-- Saturday, December 3, 2016 -->

{{ now | date:'longDate' }}<!-- December 3, 2016 -->

{{ now | date:'mediumDate' }}<!-- Dec 3, 2016 -->

{{ now | date:'shortDate' }}<!-- 12/3/16 -->

{{ now | date:'mediumTime' }}<!-- 10:43:51 AM -->

{{ now | date:'shortTime' }}<!-- 10:43 AM -->

?

Q2：constant在依賴注入中起什么作用？

A2：

constant是個常量，是用來在配置階段傳遞數(shù)值，注意這個常量在配置階段是不可用的。

?

Q3：orderBy 是干嘛的

A3：

AngularJS中orderBy進行排序，參數(shù)可以有三種類型，分別為：function,string,array:

第一種:function,如果是function,那么function函數(shù)會遍歷待排序的數(shù)組，并將返回的結(jié)果作為angular庫函數(shù)中comparator的參數(shù)，進行比較排序。

第二：如果是字符串，假如待排序的數(shù)組為對象，那么將會按照待排序數(shù)組中的每個對象的對應(yīng)屬性值，進行排序。如果字符串前邊加有“+”，“-”符號，那么+表示升序排序，-表示降序排序。如果字符串為空，那么將按照元素自身進行排序。

第三種：如果是array,那么是第二種情況的一種多屬性排序方式 。比如參數(shù)為[a,b],那么將先按照a屬性值進行排序，如果a屬性值相同，那么將按照b屬性值進行排序。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的简述angular中constant和$filter的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。