简述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.代碼實戰
??Demo
?
6.拓展思考
有沒有其他自定義過濾方法？
在CONTROLLER方法內定義一個方法：
控制器：（控制器名，控制器函數{
......
自定義過濾函數{
return function (待過濾數據, 參數....) {
......
return? 已過濾數據;
}
}）
?
7.參考文獻
?
參考一：angularJS constant和value
參考二：angularJS 自定義過濾器
參考三：AngularJS 過濾器——Runoob
參考四：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屬性值進行排序。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的简述angular中constant和$filter的用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring_Bean的作用域---和使
- 下一篇： 分布式消息通信ActiveMQ原理-消费