【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直接在常量上加，规范了代码并且代码量也会优化不少。