【JS-7】angular中constant和$filter的用法

小课堂【深圳-WEB-C组】

分享人:韩鹏

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

constant:

constant是用来设置常量的,constant(name,value)可以将一个已经存在的变量值注册为服务,通过依赖注入将其注入到应用的其他部分中,其中,name为注册的常量的名字,value为注册的常量的值或对象。

$filter:

$filter是AngularJs 服务,$filter是过滤器,用来格式化数据用的。

2.知识剖析

AngularJs设置全局变量的方法:

angularjs自身有两种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种。要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用。

1.通过var 直接定义global variable,这跟纯js是一样的。

2.用angularjs value来设置全局变量 。

3.用angularjs constant来设置全局变量 。

value 和 constant 的区别:

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

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

Demo

过滤器:$filter

ng内置了9种过滤器,分别是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。

filter的用法:

filter是用来格式化数据用的
基本原型
{{expression | filter}}
多个filter连用版
{{expression | filter1 | filter2}}
传入参数版
{{expression | filter:1:2}}

Demo

3.常见问题

filter的实际应用:

自定义filter

4.解决方案

自定义一个过滤器也相当容易,仅仅需要在module中注册一个新的filter工厂函数。工厂函数会返回一个新的过滤器函数,过滤器的输入作为过滤器函数的第一个参数,其他过滤器的参数作为过滤器函数的附加参数传入。

过滤器函数是一个纯函数,这意味着给出相同的输入参数总能得到相同的输出结果,而不受外界状态的影响(例如,angularjs的services)。根据这一点,angularjs才能做到仅仅当输入变化时才去执行一次过滤器。

filter方法:

 

自定义过滤器:{{带过滤数据 |过滤器名:参数1:参数2:参数3.....}}

		app.filter('过滤器名', function () {
			return function (待过滤数据, 参数....) {
					......
			return  已过滤数据;
		}
			

5.代码实战

6.拓展思考

有没有其他自定义过滤方法?

在controller方法内定义一个方法:


	控制器:(控制器名,控制器函数{
			......
			自定义过滤函数{
				return function (待过滤数据, 参数....) {
						......
				return  已过滤数据;
			}
		})
				

7.参考文献

参考一:angularJS constant和value

参考二:angularJS 自定义过滤器

参考三:AngularJS 过滤器——Runoob

参考四:AngularJS 的那些内置九种过滤器

8.更多讨论

鸣谢

感谢大家观看

BY : 韩鹏