簡述angular中constant和$filter的用法
這裡是修真院前端小課堂,每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能,本篇分享的是:
【簡述angular中constant和$filter的用法】
【JS-7】簡述angular中constant和$filter的用法
大家好,我是IT修真院深圳分院第12期的學員韓鵬,一枚正直純潔善良的前端程式設計師,今天給大家分享一下,修真院官網JS任務7,深度思考中的知識點——簡述angular中constant和$filter的用法.
1.背景介紹
constant:
constant是用來設定常量的,constant(name,value)可以將一個已經存在的變數值註冊為服務,通過依賴注入將其注入到應用的其他部分中,其中,name為註冊的常量的名字,value為註冊的常量的值或物件。</p>
$filter:
$filter是AngularJs 服務,$filter是過濾器,用來格式化資料用的。
2.知識剖析
AngularJs設定全域性變數的方法:
angularjs自身有兩種,設定全域性變數的方法,在加上js的設定全域性變數的方法,總共有三種。要實現的功能是,在ng-app中定義的全域性變數,在不同的ng-controller裡都可以使用。
1.通過var 直接定義global variable,這跟純js是一樣的。
2.用angularjs value來設定全域性變數 。
3.用angularjs constant來設定全域性變數 。
VALUE 和 CONSTANT 的區別:
1.value不可以在config裡注入,但是constant可以。
2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要經常使用的資料。
過濾器:$FILTER
ng內建了9種過濾器,分別是:currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json物件)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)。
FILTER的用法:
filter是用來格式化資料用的
基本原型
{{expression | filter}}
多個filter連用版
{{expression | filter1 | filter2}}
傳入引數版
{{expression | filter:1:2}}
3.常見問題
FILTER的實際應用:
自定義filter
4.解決方案
自定義一個過濾器也相當容易,僅僅需要在module中註冊一個新的filter工廠函式。工廠函式會返回一個新的過濾器函式,過濾器的輸入作為過濾器函式的第一個引數,其他過濾器的引數作為過濾器函式的附加引數傳入。
過濾器函式是一個純函式,這意味著給出相同的輸入引數總能得到相同的輸出結果,而不受外界狀態的影響(例如,angularjs的services)。根據這一點,angularjs才能做到僅僅當輸入變化時才去執行一次過濾器。
FILTER方法:
自定義過濾器:{{帶過濾資料 |過濾器名:引數1:引數2:引數3.....}}
app.filter('過濾器名', function () {
return function (待過濾資料, 引數....) {
......
return 已過濾資料;
}
5.程式碼實戰
6.拓展思考
有沒有其他自定義過濾方法?
在CONTROLLER方法內定義一個方法:
控制器:(控制器名,控制器函式{
......
自定義過濾函式{
return function (待過濾資料, 引數....) {
......
return 已過濾資料;
}
})
7.參考文獻
參考二:angularJS 自定義過濾器
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是個常量,是用來在配置階段傳遞數值,注意這個常量在配置階段是不可用的。
Q3:orderBy 是幹嘛的
A3:
AngularJS中orderBy進行排序,引數可以有三種類型,分別為:function,string,array:
第一種:function,如果是function,那麼function函式會遍歷待排序的陣列,並將返回的結果作為angular庫函式中comparator的引數,進行比較排序。
第二:如果是字串,假如待排序的陣列為物件,那麼將會按照待排序陣列中的每個物件的對應屬性值,進行排序。如果字串前邊加有“+”,“-”符號,那麼+表示升序排序,-表示降序排序。如果字串為空,那麼將按照元素自身進行排序。
第三種:如果是array,那麼是第二種情況的一種多屬性排序方式 。比如引數為[a,b],那麼將先按照a屬性值進行排序,如果a屬性值相同,那麼將按照b屬性值進行排序。
更多內容,可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院:https://www.jnshu.com,初學者轉行到網際網路的聚集地