简述angular 中constant和$filter的用法

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下：

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。

相同点是：都可以接受两个参数，name和value。
区别：
1.constant(name,value)可以将一个已经存在的变量值注册为服务，并将其注入到应用的其他部分中。其中，name为注册的常量的名字，value为注册的常量的值或对象。
举例：

(1)value为值时：

angular.module('myApp') .constant('apiKey','123123123')
.controller('MyController', function($scope, apiKey) {
// 可以像上面一样用apiKey作为常量
// 用123123123作为字符串的值
$scope.apiKey = apiKey;
});

(2)value为对象时：

angular.module('myApp') .constant('apiKey',{name:[],age:[],date:[]})
.factory('myFactory',function(apiKey,$scope){
apiKey.name = "lyy";
});

2.value(name,value)的name同样是需要注册的服务名,value将这个值将作为可以注入的实例返回。

ngular.module('myApp')
.value('apiKey','123123123');

它们最大的区别是：常量可以注入到配置函数中，而值不行。

通常情况下，可以通过value()来注册服务对象或函数，用constant()来配置数据。

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})
.value('FBid','231231231')
.config(function(FBid) {
// 这将抛出一个错误，未知的provider: FBid
// 因为在config函数内部无法访问这个值
});

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

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

关于angularJS中filter(过滤器)的使用

filter时angular开发经常接触的一个内容

首先，filter分为angularJS中封装好的filter和自定义filter
自定义的filter包括以下：

1.currency(货币处理)，默认是美元符号

{{num | currency : '￥'}}

2.date(日期格式化)

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式，y M d h m s E 分别表示年月日时分秒星期，你可以自由组合它们

filter(匹配子串) {{ childrenArray | filter : 4 }} //匹配属性值中含有4的

4.json(格式化Json对象)

{{ jsonTest | json}}

5.limitTo(限制数组长度或字符串长度)

{{ childrenArray | limitTo : 2 }}//将会显示数组中的前两项

6.lowercase(小写) {{name | lowercase}}

7.uppercase(大写)

{{name | uppercase}}

8.number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定小float类型保留几位小数：
苦于在js里频繁使用toFixed()的同事得救了

9.orderBy(排序)

{{ childrenArray | orderBy : 'age' }}//按age属性值进行排序

封装好的几种中，主要排序，限制长度和日期格式化以及保留小数位比较有用，其余在遇到特定需求的时候，我们可能要自定义过滤器

filter的使用
过滤器在Html中的使用就是标准的表达式后面+ | +filter的名字
比如{{ name | filter}}使用一个filter
或者{{name | filter1 | filter2 | filter3 }}使用多个filter，前一个filter的输出是下一个filter的输入

再或者{{ expression | filter:argument1:argument2:... }} argument1，argument2到argumentN都是filter的参数，这种是为filter传参数

日常问题：

Q1:日期格式化的方法还有哪几种？

A1:

{ now | date:'medium' }}

{{ now | date:'short' }}
{{ now | date:'fullDate' }}
{{ now | date:'longDate' }}
{{ now | date:'mediumDate' }}
{{ now | date:'shortDate' }}
{{ now | date:'mediumTime' }}

{{ now | date:'shortTime' }}

Q2:filter如何在js文件中书写？

A2：filter是不需要注入到controller中的，就像function一样，可以全局使用

然后用一个例子来说明自定义filter

Q3：constant在依赖注入中起什么作用？

A3:constant是个常量，是用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台。

每个职业以15个左右的task为初学者提供更快速高效的学习方式；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下：

简述angular 中constant和$filter的用法

猜你喜欢