博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简述angular中constant和$filter的用法
阅读量:6689 次
发布时间:2019-06-25

本文共 2524 字,大约阅读时间需要 8 分钟。

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

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

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

【简述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.代码实战

  

 

6.拓展思考

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

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

控制器:(控制器名,控制器函数{

......

自定义过滤函数{

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

......

return  已过滤数据;

}

})

 

7.参考文献

 

参考一:

参考二:

参考三:

参考四:

 

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链接 视频链接

转载地址:http://xfeao.baihongyu.com/

你可能感兴趣的文章
poj3761(反序表)
查看>>
knockout前端经常用的功能
查看>>
ogg 、 Shareplex和DSG RealSync 对比
查看>>
是否使用绷定变量的一些建议
查看>>
reveal查看任意APP
查看>>
Eucalyptus简介
查看>>
Intellij IDEA 4种配置热部署的方法
查看>>
CCF201412试题
查看>>
HDU1164 Eddy's research I【素因子分解】
查看>>
学习前端工程师手册--学习记录
查看>>
9段高效率开发PHP程序的代码
查看>>
纯干货分享: 如何在 React 框架中使用SpreadJS
查看>>
机器学习实战之logistic回归
查看>>
SQL优化三板斧:精简之道、驱动为王、集合为本
查看>>
MVC中实现部分内容异步加载
查看>>
PTA编程总结2:
查看>>
《C++常见问题及解答》
查看>>
剑指OFFER——顺时针打印矩阵
查看>>
Live Archive 3490 - Generator 概率
查看>>
洛谷 1417 烹调方案
查看>>