今天给大家分享一下:
简述angular 中constant和$filter的用法
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' }}<!-- Dec 3, 2016 10:43:51 AM -->
{{ now | date:'short' }}<!-- 12/3/16 10:43 AM -->
{{ now | date:'fullDate' }}<!-- Saturday, December 3, 2016 -->
{{ now | date:'longDate' }}<!-- December 3, 2016 -->
{{ now | date:'mediumDate' }}<!-- Dec 3, 2016 -->
{{ now | date:'shortDate' }}<!-- 12/3/16 -->
{{ now | date:'mediumTime' }}<!-- 10:43:51 AM -->
{{ now | date:'shortTime' }}<!-- 10:43 AM -->
Q2:filter如何在js文件中书写?
A2:filter是不需要注入到controller中的,就像function一样,可以全局使用
然后用一个例子来说明自定义filter
Q3:constant在依赖注入中起什么作用?
A3:constant是个常量,是用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。