大家好，我是IT修真院郑州分院王姣妍，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 js任务中可能会使用到的知识点：
angularJS中的constant和$filter的用法
一、背景介绍
angular是什么：AngularJS 最初由Misko Hevery 和Adam Abrons于2009年开发， 是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性， 最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。。
constant，可以算作angular的全局常量，使用的时候只需要在控制器注入即可。
$filter，angular的过滤器，如果想要在控制器里面使用，也是注入，然后调用，而html中的数据过滤，直接键入过滤器名称和对应值即可。
二、知识剖析
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位
2、格式化日期
{{ 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的对象
4、将对象格式化成标准的JSON格式：
{{ {name:'Jack', age: 21} | json}} //{"name":"Jack","age":"21"}
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方法。
三、常见问题
如何使用angular中constant和$filter
四、解决方案
html:
{{ type | ChangeType }}
js:
angular.module('App',[])
.controller('myCtr',function ($scope) {
$scope.type=2
})
.constant('myConstant',[
{type :'0' ,name :'首页banner'},
{type :'1 ',name :'找职位banner'},
{type :'2' ,name :'找精英banner'},
{type :'3' ,name:'行业大图'}
])
.filter("ChangeType",function (myConstant) {
return function (a) {
for(var i=0;i
if(a==myConstant[i].type){
return myConstant[i].name;
}
}
}
})
想要显示什么内容，只需改变$scope.type的数字就可以了
五、编码实战
六、扩展思考
七、参考文献
参考二：Filter用法详解
八、更多讨论
1、constant函数取值，和直接用常量名有什么区别
答：大多数情况直接用常量名，但是在angular中，使用constant的字段约定与后台进行数据交互的时候很方便，结构更加清晰。constant()函数和直接使用常量名输出的效果是一样的，但函数可以动态的输出不同的常量，在使用上要灵活、方便。
2、filter怎么去掉时间的 秒
答：{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们
3、什么情况下使用filter
答：常用的就是一个date的格式转换，表格中进行排序、还有大量的一些约定字段，使用自定义的filter。
八、
PPT链接：PPT
视频链接：
undefined_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论