【js-07】
主題：簡述angular中constant和$filter的用法
小課堂【成都分院】
分享人：藍東
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
angular是什么：AngularJS最初由Misko Hevery和Adam Abrons于2009年開發，后來成為了Google公司的項目。AngularJS彌補了HTML在構建應用方面的不足，其通過使用標識符（directives）結構，來擴展Web應用中的HTML詞匯，使開發者可以使用HTML來聲明動態內容，從而使得Web開發和測試工作變得更加容易。
constant，可以算作angular的全局數據，想要使用的話，只需要在控制器注入即可。
$filter，angular的過濾器，如果想要在控制器里面使用，也是注入，然后調用，而html中的數據過濾，直接鍵入過濾器名稱和對應值即可。
2.知識剖析
constant
每當搜索constant時候，總會連帶出現value的說明。
兩者都可以作為全局變量使用，但是有兩點不同：
1.value不可以在config里注入，但是constant可以。
2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要經常使用的數據。
下面是簡單的應用例子：
/* App Module */
var test2 = 'tank';? ? ? ? //方法1，定義全局變量
var phonecatApp = angular.module('phonecatApp', []);? ? ? //定義一個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區別
value不可在config里注入，constant可以。
phonecatApp.value('test',{"test":"test222","test1":"test111"});
phonecatApp.constant('constanttest', 'this is constanttest');
如果讓value在config里面引入
app.config(function(test){
..
});
就會報錯
反之constant就不會，一切正常
filter是用來格式化數據用的
基本原型
{{expression|filter}}
多個filter連用版
{{expression| filter1 | filter2}}
傳入參數版
{{expression|filter:1:2}}
AngularJS內建了一些常用的filter：
1、格式化貨幣：
{{ 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格式化為貨幣， 不改變單位符號， 小數部分將四舍五入
2、格式化日期：
{{ 1304375948024 |date:'medium'}}//May 03, 2011 06:39:08 PM
{{ 1304375948024 |date}}//結果：May 3, 2011
{{ 1304375948024 |date:"MM/dd/yyyy @ h:mma" }}//結果：05/03/2011 @ 6:39AM
{{ 1304375948024 |date:"yyyy-MM-dd hh:mm:ss" }}//結果：2011-05-03 06:39:08
3、過濾數組：
$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的行//上例結果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{arr |filter:{'name':'ip'} }}//查找name like ip的行//上例結果:[{"age":20,"id":10,"name":"iphone"}]
4、將對象格式化成標準的JSON格式：
{{ {name:'Jack',age: 21} |json}}
5、字符串，對象截取：
{{ "i love tank" |limitTo:6 }}//結果：i love
{{ "i love tank" |limitTo:-4 }}//結果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] |limitTo:1 }}//結果：[{"age":20,"id":10,"name":"iphone"}]
6、大小寫轉換：
China has joined the {{ "wto" |uppercase}}.
We all need {{ "MONEY" |lowercase}}.
7、數值類：
{{ 1.234567 |number:1 }}? //結果：1.2
{{ 1234567 |number}}? ? //結果：1,234,567
8、對象排序：
$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' }}//根據id升序排
9、當然，我們還可以自定義filter方法。
3.常見問題
如何使用angular中constant和$filter
4.解決方案
5.編碼實戰
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、過濾數組：
{{arr |filter:'s'}}
{{arr |filter:{'name':'ip'} }}
4、將對象格式化成標準的JSON格式：
{{ {name:'Jack',age: 21} |json}}
5、字符串，對象截取：
{{ "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、大小寫轉換：
China has joined the {{ "wto" |uppercase}}.
We all need {{ "MONEY" |lowercase}}.
7、數值類：
{{ 1.234567 |number:1 }}
{{ 1234567 |number}}
8、對象排序：
{{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 = "首頁banner";
return type
}
if (type == 1) {
type = "找職位banner";
return type
}
if (type == 2) {
type = "找精英banner";
return type
}
if (type == 3) {
type = "行業大圖";
return type
}
}
});
6.擴展思考
AngularJS的內置過濾器有哪些？
7.參考文獻
參考一：angularJS constant和value
參考二：AngularJS的Filter用法詳解
8.更多討論
感謝觀看
BY :梁家健|陳中彬|先小波|藍東
本期觀眾提問：
1.filter?和constant結合起來怎么寫？
答：
?phonecatApp.constant('constanttest', 'this is constanttest');
定義了常量后，過濾器：
.filter('positionStatusFilter',?function?(constanttest)?{
return function(type){
return?constanttest[type];
}})
tips：記得注入
2.直接寫在html和使用constant有什么區別：
答：如果寫在html上，維護性拓展性不高，如果需要加類型，要去找html進行更改，如果用的constant直接在常量上加，規范了代碼并且代碼量也會優化不少。
