1. 程式人生 > >簡述angular中constant和$filter的用法

簡述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連結 視訊連結

更多內容,可以加入IT交流群565734203與大家一起討論交流

這裡是技能樹·IT修真院:https://www.jnshu.com,初學者轉行到網際網路的聚集地