简述angular 中constant和$filter的用法？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【简述angular 中constant和$filter的用法？】

 

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配置一些需要经常使用的数据。

下面是简单的应用例子：

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是用来格式化数据用的

基本原型

{{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.编码实战
angular.module("myApp")

.value('val',{

})

//公司编辑常量组

.constant('con', {

  //公司人数

  companyPop:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100-200人'},

      {type: 5, name: '200-500人'},

      {type: 6, name: '500-1000人'},

      {type: 7, name: '1000人以上'}

],

  //公司行业

  //团队规模：

  workGroupScale:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100人以上'},

],

  //用户人数

  userPop:[

      {type:0,name:'不限'},

{type:1,name:'1W-10W'},

{type:2,name:'10W-50W'},

{type:3,name:'50W-100W'},

{type:4,name:'100W-1000W'},

      {type:5,name:'1000W以上'}

],

  //盈利情况

  earnings:[

      {type:0,name:'不限'},

      {type:1,name:'亏损'},

      {type:2,name:'平衡'},

      {type:3,name:'盈利'},

      {type:4,name:'其他'}

]

5.扩展思考
AngularJS的内置过滤器有哪些？

今天我们来了解一下AngularJS的内置过滤器

先来看看这些内置过滤器使用方法:

一个过滤器，不带参数的情况

{{expression | filter}}

一个过滤器，带参数的情况

{{expression | filter:arguments}}

一个过滤器，带多个参数的情况

{{expression | filter: arg1: arg2: ...}}

多个过滤器，不带参数的情况

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

下面我们分别使用以下AngularJS的内置过滤器

currency

currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。

可以这样使用：{{ 3600 | currency: "$￥"}}

返回结果为$￥123.00

number

number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数

如果传入的是一个非数字字符，会返回空字符串

可以这样使用：{{ 3600 | number:2}}

返回结果为：3,600.00

lowercase

lowercase将字符串转换为小写

可以这样使用：{{ "HEllo" | lowercase}}

返回结果为：hello

uppercase

uppercase将字符串转换为大写

可以这样使用：{{ "HEllo" | uppercase}}

返回结果为：HELLO

json

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

这个过滤器对调试相当有用

可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}

返回结果为：{ "name": "dreamapple", "language": "AngularJS" }

date

date过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。

这个过滤器用法很多我这里列举几种常用的

{{ today | date: "yyyy - mm - dd"}}

结果为：2015 - 15 - 13

{{ today | date: "yyyy - mm - dd HH:mm::ss"}}

结果为：2015 - 18 - 13 20:18::38

online code

还有三个内置的过滤器，但是使用稍微复杂一点。

6.参考文献
参考一：angularJS constant和value

参考二：AngularJS的Filter用法详解

7.更多讨论
Q1: constant和value有什么关系

A1: 

当我们想要创建一个服务，并且这个服务只需要返回数据时，就可以使用constant(name,value)和value(name,value)，不过，它们有两个显著的区别：

1.value不可以在config里注入，但是constant可以

2.value可以修改，但是constant不可以修改，一般直接用constant配置一些需要经常使用的数据。

Q2: 什么是stateful filters

A2: 

在 Angular 里面，经常使用 filter 来处理一些数据的显示问题。但当 filter 要使用到异步数据时就会变得有些麻烦，试了网上很多解决方案都不行，才发现和 Angular 版本升级有关：

Angular 在 1.3.0 之后的版本提出了Stateful filters的概念，但不是很推荐使用。

Q3: 如何学习angular

A3: 先通过任务6-10来学习，边看文档边写代码，多体验下框架的核心