【js-07】
主題:簡(jiǎn)述angular中constant和$filter的用法
小課堂【成都分院】
分享人:藍(lán)東
目錄
1.背景介紹
2.知識(shí)剖析
3.常見(jiàn)問(wèn)題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
angular是什么:AngularJS最初由Misko Hevery和Adam Abrons于2009年開(kāi)發(fā)箭券,后來(lái)成為了Google公司的項(xiàng)目。AngularJS彌補(bǔ)了HTML在構(gòu)建應(yīng)用方面的不足鳍徽,其通過(guò)使用標(biāo)識(shí)符(directives)結(jié)構(gòu),來(lái)擴(kuò)展Web應(yīng)用中的HTML詞匯购公,使開(kāi)發(fā)者可以使用HTML來(lái)聲明動(dòng)態(tài)內(nèi)容呻率,從而使得Web開(kāi)發(fā)和測(cè)試工作變得更加容易很澄。
constant,可以算作angular的全局?jǐn)?shù)據(jù)他托,想要使用的話掖肋,只需要在控制器注入即可。
$filter赏参,angular的過(guò)濾器志笼,如果想要在控制器里面使用,也是注入把篓,然后調(diào)用纫溃,而html中的數(shù)據(jù)過(guò)濾,直接鍵入過(guò)濾器名稱和對(duì)應(yīng)值即可韧掩。
2.知識(shí)剖析
constant
每當(dāng)搜索constant時(shí)候紊浩,總會(huì)連帶出現(xiàn)value的說(shuō)明。
兩者都可以作為全局變量使用,但是有兩點(diǎn)不同:
1.value不可以在config里注入坊谁,但是constant可以费彼。
2.value可以修改,但是constant不可以修改口芍,一般直接用constant配置一些需要經(jīng)常使用的數(shù)據(jù)箍铲。
下面是簡(jiǎn)單的應(yīng)用例子:
/* App Module */
var test2 = 'tank';? ? ? ? //方法1,定義全局變量
var phonecatApp = angular.module('phonecatApp', []);? ? ? //定義一個(gè)ng-app
phonecatApp.value('test',{"test":"test222","test1":"test111"});? //方法2定義全局變量
phonecatApp.constant('constanttest', 'this is constanttest');? ? //方法3定義全局變量
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope','test','constanttest',
function($scope,test,constanttest) {
$scope.test = test;? ? ? ? ? ? ? ? ? //方法2鬓椭,將全局變量賦值給$scope.test
$scope.constanttest = constanttest;? //方法3虹钮,賦值
$scope.test2 = test2;? ? ? ? ? ? ? ? //方法1,賦值
}]);
{{test.test1}}
{{constanttest}}
{{test2}}
value與constant區(qū)別
value不可在config里注入膘融,constant可以。
phonecatApp.value('test',{"test":"test222","test1":"test111"});
phonecatApp.constant('constanttest', 'this is constanttest');
如果讓value在config里面引入
app.config(function(test){
..
});
就會(huì)報(bào)錯(cuò)
反之constant就不會(huì)祭玉,一切正常
filter是用來(lái)格式化數(shù)據(jù)用的
基本原型
{{expression|filter}}
多個(gè)filter連用版
{{expression| filter1 | filter2}}
傳入?yún)?shù)版
{{expression|filter:1:2}}
AngularJS內(nèi)建了一些常用的filter:
1氧映、格式化貨幣:
{{ 12 |currency}}? //將12格式化為貨幣,默認(rèn)單位符號(hào)為'$',小數(shù)默認(rèn)2位
{{ 12.45 |currency:'¥'}} //將12.45格式化為貨幣脱货,使用自定義單位符號(hào)為'¥',小數(shù)默認(rèn)2位
{{ 12.45 |currency:'CHY¥':1}} //將12.45格式化為貨幣岛都,使用自定義單位符號(hào)為'CHY¥',小數(shù)指定1位,會(huì)執(zhí)行四舍五入操作
{{ 12.55 |currency:undefined:0}} //將12.55格式化為貨幣, 不改變單位符號(hào)振峻, 小數(shù)部分將四舍五入
2臼疫、格式化日期:
{{ 1304375948024 |date:'medium'}}//May 03, 2011 06:39:08 PM
{{ 1304375948024 |date}}//結(jié)果:May 3, 2011
{{ 1304375948024 |date:"MM/dd/yyyy @ h:mma" }}//結(jié)果:05/03/2011 @ 6:39AM
{{ 1304375948024 |date:"yyyy-MM-dd hh:mm:ss" }}//結(jié)果:2011-05-03 06:39:08
3、過(guò)濾數(shù)組:
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr |filter:'s'}}? //查找含有有s的行//上例結(jié)果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{arr |filter:{'name':'ip'} }}//查找name like ip的行//上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}]
4扣孟、將對(duì)象格式化成標(biāo)準(zhǔn)的JSON格式:
{{ {name:'Jack',age: 21} |json}}
5烫堤、字符串,對(duì)象截确锛邸:
{{ "i love tank" |limitTo:6 }}//結(jié)果:i love
{{ "i love tank" |limitTo:-4 }}//結(jié)果:tank
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] |limitTo:1 }}//結(jié)果:[{"age":20,"id":10,"name":"iphone"}]
6鸽斟、大小寫(xiě)轉(zhuǎn)換:
China has joined the {{ "wto" |uppercase}}.
We all need {{ "MONEY" |lowercase}}.
7、數(shù)值類:
{{ 1.234567 |number:1 }}? //結(jié)果:1.2
{{ 1234567 |number}}? ? //結(jié)果:1,234,567
8利诺、對(duì)象排序:
$scope.arr = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ]
{{arr |orderBy:'id':true }}//根id降序排
{{arr |orderBy:'id' }}//根據(jù)id升序排
9富蓄、當(dāng)然,我們還可以自定義filter方法慢逾。
3.常見(jiàn)問(wèn)題
如何使用angular中constant和$filter
4.解決方案
5.編碼實(shí)戰(zhàn)
html:
1.格式化貨幣:
{{ 12 |currency}}
{{ 12.45 |currency:'¥'}}
{{ 12.45 |currency:'CHY¥':1}}
{{ 12.55 |currency:undefined:0}}
2立倍、格式化日期:
{{ 1304375948024 |date:'medium'}}
{{ 1304375948024 |date}}
{{ 1304375948024 |date:"yyyy-MM-dd hh:mm:ss" }}
3、過(guò)濾數(shù)組:
{{arr |filter:'s'}}
{{arr |filter:{'name':'ip'} }}
4侣滩、將對(duì)象格式化成標(biāo)準(zhǔn)的JSON格式:
{{ {name:'Jack',age: 21} |json}}
5口注、字符串,對(duì)象截仁ぢ薄:
{{ "i love tank" |limitTo:6 }}
{{ "i love tank" |limitTo:-4 }}
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] |limitTo:1 }}
6疆导、大小寫(xiě)轉(zhuǎn)換:
China has joined the {{ "wto" |uppercase}}.
We all need {{ "MONEY" |lowercase}}.
7、數(shù)值類:
{{ 1.234567 |number:1 }}
{{ 1234567 |number}}
8、對(duì)象排序:
{{arr |orderBy:'id':true }}
{{arr |orderBy:'id' }}
9澈段、自定義:
{{1 | fMes:'compPoList':'type'}}
{{1 | provinceFilter}}
app.filter('reverse', function () {
return function (type) {
if (type == 0) {
type = "首頁(yè)banner";
return type
}
if (type == 1) {
type = "找職位banner";
return type
}
if (type == 2) {
type = "找精英banner";
return type
}
if (type == 3) {
type = "行業(yè)大圖";
return type
}
}
});
6.擴(kuò)展思考
AngularJS的內(nèi)置過(guò)濾器有哪些悠菜?
7.參考文獻(xiàn)
參考一:angularJS constant和value
參考二:AngularJS的Filter用法詳解
8.更多討論
感謝觀看
BY :梁家健|陳中彬|先小波|藍(lán)東
本期觀眾提問(wèn):
1.filter?和constant結(jié)合起來(lái)怎么寫(xiě)?
答:
?phonecatApp.constant('constanttest', 'this is constanttest');
定義了常量后败富,過(guò)濾器:
.filter('positionStatusFilter',?function?(constanttest)?{
return function(type){
return?constanttest[type];
}})
tips:記得注入
2.直接寫(xiě)在html和使用constant有什么區(qū)別:
答:如果寫(xiě)在html上悔醋,維護(hù)性拓展性不高,如果需要加類型兽叮,要去找html進(jìn)行更改芬骄,如果用的constant直接在常量上加,規(guī)范了代碼并且代碼量也會(huì)優(yōu)化不少鹦聪。