簡述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)
更多詳細信息可以參考官方文檔?這里
編碼實戰
見最下視頻↓
更多思考
為什么過濾器不需要引入就可以直接使用?
參考資料
視頻鏈接:https://v.qq.com/x/page/k0501icb2hf.html
ppt鏈接:https://ptteng.github.io/PPT/PPT/js-07-angular-constant-and-$filter.html