【北京分院一百零六期】簡述ANGULAR中CONSTANT和$FILTER的用法

簡述ANGULAR中CONSTANT和$FILTER的用法

背景介紹

angular是什么,這里不再敘述。

constant,可以算作angular的全局數據,想要使用的話,只需要在控制器注入即可。

$filter,angular的過濾器,如果想要在控制器里面使用,也是注入,然后調用,而html中的數據過濾,直接鍵入過濾器名稱和對應值即可。

知識剖析

constant:

每當搜索constant時候,總會連帶出現value的說明。

兩者都可以作為全局變量使用,但是有兩點不同:

value不可以在config里注入,但是constant可以。

value可以修改,但是constant不可以修改,一般直接用constant配置一些需要經常使用的數據。

下面是簡單的應用例子:

angular.module('myApp', [])

.constant('apiKey','123123123')

.value('FBid','231231231')

.controller('myController',function($scope,apiKey,FBid){

$scope.a = apiKey;

$scope.b = FBid;

})

.config(function(apiKey) {

// 在這里apiKey將被賦值為123123123// 就像上面設置的那樣

})

.config(function(FBid) {

// 這將拋出一個錯誤,未知的provider: FBid

// 因為在config函數內部無法訪問這個值

});

Filter

Filter是用來格式化數據用的。

Filter的基本原型( '|' 類似于Linux中的管道模式):

{{ expression | filter }}

Filter可以被鏈式使用(即連續使用多個filter):

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多個參數:

{{expression|filter:argument1:argument2:...}}

AngularJS內建的Filter

AngularJS內建了一些常用的Filter,我們一一來看一下。

currencyFilter(currency):

用途:格式化貨幣

方法原型:

function(amount, currencySymbol, fractionSize)

用法

{{ 12 | currency}}? //將12格式化為貨幣,默認單位符號為 ', 小數默認2位

{{ 12.45 | currency:'¥'}}? ? //將12.45格式化為貨幣,使用自定義單位符號為 '¥', 小數默認2位

{{ 12.45 | currency:'CHY¥':1}}? //將12.45格式化為貨幣,使用自定義單位符號為 'CHY¥', 小數指定1位, 會執行四舍五入操作

{{ 12.55 | currency:undefined:0}}? //將12.55格式化為貨幣, 不改變單位符號, 小數部分將四舍五入

dateFilter(date):

用途:格式化日期

方法原型:

function(date, format, timezone)

用法

{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}? //使用ISO標準日期格式

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}? //使用13位(單位:毫秒)時間戳

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}? //指定timezone為UTC

jsonFilter(json):

方法原型:

function(object, spacing)

用法(將對象格式化成標準的JSON格式):

{{ {name:'Jack', age:21} | json}}


自定義Filter

和Directive一樣,如果內建的Filter不能滿足你的需求,你當然可以定義一個專屬于你自己的Filter。我們來做一個自己的Filter:capitalize_as_you_want,該Filter會使你輸入的字符串中的首字母、指定index位置字母以及指定的字母全部大寫。

function(input, capitalize_index, specified_char)

更多詳細信息可以參考官方文檔?這里

編碼實戰

見最下視頻↓

更多思考

為什么過濾器不需要引入就可以直接使用?


參考資料

AngularJS constant和value

AngularJS的Filter用法詳解


視頻鏈接:https://v.qq.com/x/page/k0501icb2hf.html

ppt鏈接:https://ptteng.github.io/PPT/PPT/js-07-angular-constant-and-$filter.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容