简述angular中constant和$filter的用法
這里是修真院前端小課堂，每篇分享文從
【背景介紹】【知識(shí)剖析】【常見問題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】
八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：
【簡(jiǎn)述angular中constant和$filter的用法】
【JS-7】簡(jiǎn)述angular中constant和$filter的用法
大家好，我是IT修真院深圳分院第12期的學(xué)員韓鵬，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)JS任務(wù)7，深度思考中的知識(shí)點(diǎn)——簡(jiǎn)述angular中constant和$filter的用法.
?
1.背景介紹
constant:? ??
? ? constant是用來設(shè)置常量的，constant(name,value)可以將一個(gè)已經(jīng)存在的變量值注冊(cè)為服務(wù)，通過依賴注入將其注入到應(yīng)用的其他部分中，其中，name為注冊(cè)的常量的名字，value為注冊(cè)的常量的值或?qū)ο蟆?lt;/p>
$filter:
? ? $filter是AngularJs 服務(wù)，$filter是過濾器，用來格式化數(shù)據(jù)用的。
?
2.知識(shí)剖析
AngularJs設(shè)置全局變量的方法：
? ? angularjs自身有兩種，設(shè)置全局變量的方法，在加上js的設(shè)置全局變量的方法，總共有三種。要實(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對(duì)象)、limitTo(限制個(gè)數(shù))、lowercase(小寫)、uppercase(大寫)、number(數(shù)字)、orderBy(排序)。
?
FILTER的用法：
? ? filter是用來格式化數(shù)據(jù)用的?
? 基本原型?
{{expression | filter}}?
? 多個(gè)filter連用版?
{{expression | filter1 | filter2}}?
? 傳入?yún)?shù)版?
{{expression | filter:1:2}}
?
3.常見問題
? FILTER的實(shí)際應(yīng)用：
? ? 自定義filter
?
4.解決方案
? ? 自定義一個(gè)過濾器也相當(dāng)容易，僅僅需要在module中注冊(cè)一個(gè)新的filter工廠函數(shù)。工廠函數(shù)會(huì)返回一個(gè)新的過濾器函數(shù)，過濾器的輸入作為過濾器函數(shù)的第一個(gè)參數(shù)，其他過濾器的參數(shù)作為過濾器函數(shù)的附加參數(shù)傳入。
? ? 過濾器函數(shù)是一個(gè)純函數(shù)，這意味著給出相同的輸入?yún)?shù)總能得到相同的輸出結(jié)果，而不受外界狀態(tài)的影響（例如，angularjs的services）。根據(jù)這一點(diǎn)，angularjs才能做到僅僅當(dāng)輸入變化時(shí)才去執(zhí)行一次過濾器。
?
FILTER方法:
? 自定義過濾器：{{帶過濾數(shù)據(jù) |過濾器名：參數(shù)1：參數(shù)2：參數(shù)3.....}}
app.filter('過濾器名', function () {
return function (待過濾數(shù)據(jù), 參數(shù)....) {
......
return? 已過濾數(shù)據(jù);
}
?
5.代碼實(shí)戰(zhàn)
??Demo
?
6.拓展思考
有沒有其他自定義過濾方法？
在CONTROLLER方法內(nèi)定義一個(gè)方法：
控制器：（控制器名，控制器函數(shù){
......
自定義過濾函數(shù){
return function (待過濾數(shù)據(jù), 參數(shù)....) {
......
return? 已過濾數(shù)據(jù);
}
}）
?
7.參考文獻(xiàn)
?
參考一：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是個(gè)常量，是用來在配置階段傳遞數(shù)值，注意這個(gè)常量在配置階段是不可用的。
?
Q3：orderBy 是干嘛的
A3：
AngularJS中orderBy進(jìn)行排序，參數(shù)可以有三種類型，分別為：function,string,array:
第一種:function,如果是function,那么function函數(shù)會(huì)遍歷待排序的數(shù)組，并將返回的結(jié)果作為angular庫函數(shù)中comparator的參數(shù)，進(jìn)行比較排序。
第二：如果是字符串，假如待排序的數(shù)組為對(duì)象，那么將會(huì)按照待排序數(shù)組中的每個(gè)對(duì)象的對(duì)應(yīng)屬性值，進(jìn)行排序。如果字符串前邊加有“+”，“-”符號(hào)，那么+表示升序排序，-表示降序排序。如果字符串為空，那么將按照元素自身進(jìn)行排序。
第三種：如果是array,那么是第二種情況的一種多屬性排序方式 。比如參數(shù)為[a,b],那么將先按照a屬性值進(jìn)行排序，如果a屬性值相同，那么將按照b屬性值進(jìn)行排序。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的简述angular中constant和$filter的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring_Bean的作用域---和使
- 下一篇： 分布式消息通信ActiveMQ原理-消费