簡述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屬性值進行排序。

 

 

PPT連接 視頻連接