简述angular中constant和$filter的用法

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【简述angular中constant和$filter的用法】

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

你们好，我是IT修真院深圳分院第12期的学员韩鹏，一枚正直纯洁善良的前端程序员，今天给你们分享一下，修真院官网JS任务7，深度思考中的知识点——简述angular中constant和$filter的用法.

 

1.背景介绍

constant:    

    constant是用来设置常量的，constant(name,value)能够将一个已经存在的变量值注册为服务，经过依赖注入将其注入到应用的其余部分中，其中，name为注册的常量的名字，value为注册的常量的值或对象。</p>

$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配置一些须要常常使用的数据。

 

过滤器：$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}}

 

3.常见问题

  FILTER的实际应用：

    自定义filter

 

4.解决方案

    自定义一个过滤器也至关容易，仅仅须要在module中注册一个新的filter工厂函数。工厂函数会返回一个新的过滤器函数，过滤器的输入做为过滤器函数的第一个参数，其余过滤器的参数做为过滤器函数的附加参数传入。

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

 

FILTER方法:

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

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

return function (待过滤数据, 参数....) {

......

return  已过滤数据;

}

 

5.代码实战

  Demo

 

6.拓展思考

有没有其余自定义过滤方法？

在CONTROLLER方法内定义一个方法：

控制器：（控制器名，控制器函数{

......

自定义过滤函数{

return function (待过滤数据, 参数....) {

......

return  已过滤数据;

}

}）

 

7.参考文献

 

参考一：angularJS constant和value

参考二：angularJS 自定义过滤器

参考三：AngularJS 过滤器——Runoob

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

 

8.更多讨论

 

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：constant在依赖注入中起什么做用？

A2：

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

 

Q3：orderBy 是干吗的

A3：

AngularJS中orderBy进行排序，参数能够有三种类型，分别为：function,string,array:

第一种:function,若是是function,那么function函数会遍历待排序的数组，并将返回的结果做为angular库函数中comparator的参数，进行比较排序。

第二：若是是字符串，假如待排序的数组为对象，那么将会按照待排序数组中的每一个对象的对应属性值，进行排序。若是字符串前边加有“+”，“-”符号，那么+表示升序排序，-表示降序排序。若是字符串为空，那么将按照元素自身进行排序。

第三种：若是是array,那么是第二种状况的一种多属性排序方式 。好比参数为[a,b],那么将先按照a属性值进行排序，若是a属性值相同，那么将按照b属性值进行排序。

 

 

PPT连接 视频连接