简述angularjsh中constant和$filter的用法

大家好,我是IT修真院郑州分院第八期的学员,今天给大家分享一下,题目angular jsconstant$filter的用法。


一、背景介绍

AngularJS中有时在不同的控制器中使用到同一个变量,需要在ng-app或控制器中定义的全局变量。angularjs自身有二种设置全局变量的方法,constant()是其中的一种方法。

Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务,同时也会很容易自定义一个Filter过滤器。


二、知识剖析

定义全局变量的三种方法

1)通过var 直接定义global variable。

2)用angularjsconstant来设置全局变量。

3)用angularjsvalue来设置全局变量 。

 

constant和value的区别

1)value不可以在config里注入,但是constant可以;

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


$filter过滤器

filter是用来格式化数据用的

基本原型

{{expression | filter}}

多个filter连用版

{{expression | filter1 | filter2}}

传入参数版

{{expression | filter:1:2}}

 

$filter内置过滤器

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

 

    


三、常见问题

如何使用constant$ilter


四、解决方案


五、编码实战 

腾讯视频


六、拓展思考

如何自定义过滤器

$filter自定义过滤器:

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

app.filter('过滤器名', function () {

        returnfunction (待过滤数据, 参数....) {

                     ......

           return  已过滤数据;

 }

}); 


七、参考文献

参考一:angularjs自定义过滤器示例

参考二:angularjs三种定义全局变量的方法

参考三:angularjs内置9种过滤器


八、更多讨论

讨论一:如何获取angular通过过滤器过滤后的数据

module里面去取

angular.module('tset', ['$filter'function($filter){

    var a = 10;

    var b = $filter('currency')(a, '');

}])

 

讨论二:constantvalue用法上的区别

Constant可以注入configvalue不可以。除此之外,constantvalue定义全局变量时的用法是相同的,constant的值也是可以改变的,但是我们认为规定定义constant全局变量之后当做一个常量来使用,在之后的操作中不更改constant的值,认为设置了constant值可以改变,value值可以改变的设定。在之后的学习工作中也尽量遵守这一规则。

讨论三:为什么angular的过滤器要采用闭包的形式?目的是什么

app.filter 这种函数回掉的机制是由于异步
而采用闭包就是为了不污染全局变量的情况下,保存数据(从js角度出发,angular有可能是为了实现数据双向绑定(需要保存数据),又不制造过多的全局变量)。
但是在angular中有其他什么特殊意义或目的,没有深入了解。


 PPT


感谢大家观看!

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

获得更多IT技能,请移步官网点击链接直达:http://www.jnshu.com/login/1/22893921


猜你喜欢

转载自blog.csdn.net/jnshu_it/article/details/80545787