【JS-task7】

简述angular中constant和$filter的用法

分享人:朱垚

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

angular是什么:AngularJS最初由Misko Hevery和Adam Abrons于2009年开发,后来成为了Google公司的项目。AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中的HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。 constant,可以算作angular的全局数据,想要使用的话,只需要在控制器注入即可。 $filter,angular的过滤器,如果想要在控制器里面使用,也是注入,然后调用,而html中的数据过滤,直接键入过滤器名称和对应值即可。

2.知识剖析

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位
{{ 12.45 | currency:'¥'}}//将12.45格式化为货币,使用自定义单位符号为'¥',小数默认2位
{{ 12.45 | currency:'CHY¥':1}}//将12.45格式化为货币,使用自定义单位符号为'CHY¥',小数指定1位,会执行四舍五入操作
{{ 12.55 | currency:undefined:0}}//将12.55格式化为货币,不改变单位符号,小数部分将四舍五入

2、格式化日期:
            {{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM

            {{ 1304375948024 | date }}//结果:May 3, 2011

            {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//结果:05/03/2011 @ 6:39AM

            {{ 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的行//上例结果:[{"age":12,"id":11,"name":"sunmxing"},
                                                  {"age":44,"id":12,"name":"test abc"}]

{{arr | filter:{'name':'ip'} }}//查找name like ip的行//上例结果:[{"age":20,"id":10,"name":"iphone"}]

            

3.常见问题

如何使用自定义$filter

4.解决方案

见代码

5.编码实战

6.拓展思考

AngularJS的内置过滤器有哪些??

7.参考文献

参考1:angularJS constant和value
参考2:AngularJS的Filter用法详解

8.更多讨论

感谢大家观看

BY : 朱垚