簡述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，初學者轉行到網際網路的聚集地