NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

开始!AngularJS!(七)- 过滤器

| Comments

过滤器,按照一般的理解是,按照某个标准(或者阈值),将输入的内容中不满足要求的排除,得到最后的满足要求的输出。

但过滤器还有一个更宽泛的理解,就是数据变换处理器。

在AngularJS中,过滤器就是一个数据变换函数,将输入的数据进行处理,得到对应输出结果。

AngularJS内置过滤器

格式化过滤器

currency:用两个小数位和一个货币符号来格式化数字
date:根据指定的数据格式来格式化日期,模型包含的日期可表达为Date对象或者字符串(这时字符串会在格式化前被解析为Date对象)
number:用参数指定的小数位数量格式化输入
lowercase和uppercase:转换大小写
json:主要用于调试,它能打印出漂亮的JavaScript对象

数组变换过滤器

limitTo:它将数组收缩到参数指定的长度,可以从集合的头或尾开始保留其中的元素(如果是尾部,则参数必须是负数)
Filter:提供通用的过滤功能,它非常灵活,支持很多可以精确从集合中选择元素的选项
orderBy:此排序过滤器根据给定的条件对数组中的元素进行排序

过滤器的使用

在模板中使用

最简单的过滤使用方式: { { 表达式 | 过滤器名 } }

1
2
3
4
5
6
<body ng-app>
    <div>
        <input type="text" ng-model="words"/>全部转换成大写
        { {words | uppercase} }
    </div>
</body>

过滤器可以应用在另外一个过滤器的结果上,叫做“链式”调用: { { 表达式 | 过滤器1 | 过滤器2 | … } }

1
2
3
4
5
6
<body ng-app>
    <div>
        <input type="text" ng-model="words"/>
         { {words | uppercase | lowercase} }
    </div>
</body>

过滤器可以拥有(多个)参数: { { 表达式 | 过滤器:参数1:参数2:… } }

1
2
3
4
5
6
<body ng-app>
    <div>
        <input type="text" ng-model="num"/>最多显示到小数点后四位
        { {num | number:4} }
    </div>
</body>

内置过滤器是全局的命名函数,在视图中通过管道(|)符号调用,接收用冒号(:)分割的参数。

控制器和服务中使用过滤器

过滤器又可以链式的使用又可以传递参数,那它的本质是什么?在前面其实已经讲过,是数据的变换函数,本质是函数。

所以,你同样可以在控制器和服务中使用过滤器。注入过滤器有一种简单的方法,在控制器或者服务中添加以“<过滤器名>Filter”为名的依赖。例如,使用”uppercaseFilter”为依赖时,会相应的注入uppercase过滤器。

看下面的例子:在控制器中注入”uppercaseFilter”,然后将输入的小写转换成大写

1
2
3
4
5
6
<body ng-app="filterApp">
    <div ng-controller="filterController">
        <input type="text" ng-model="value" />
        <input type="button" value="To Upper Case" ng-click="changeToUpperCase()" />
    </div>
</body>
1
2
3
4
5
6
7
angular.module('filterApp', [])

.controller('filterController', ['uppercaseFilter', '$scope', function (uppercaseFilter, $scope) {
    $scope.changeToUpperCase = function () {
        $scope.value = uppercaseFilter($scope.value);
    };
}]);

自定义过滤器

除了使用AngularJS内置的过滤器,我们还可以定义自己的过滤器

1
2
3
<body ng-app="filterApp">
    <input type="text" ng-model="value" />
</body>
1
2
3
4
5
6
7
angular.module('filterApp', [])

.filter('subString', function () {
    return function (input, number) {
        return input.slice(0,3);
    };
});

优点和缺点

过滤器的优点就是,它们不需要在作用域上注册函数,而且与规整的函数调用相比,通常具有更简洁的语法

缺点是,过滤器的调用是频繁的,过滤器是函数,当模型发生变换时,使用了过滤器的表达式就是进行一次求值,所以被调用的次数非常的平凡。

用Bower做JavaScript类库依赖管理

| Comments

使用Grunt做JavaScript的构建,npm为它解决了最大的问题,插件(提供各种各样的任务)。但是如果你是做前端的Web应用,那么就还需要很多东西,比如,MVX框架,JavaScript工具类库等,这些东西,我们在构建中称为依赖。而这时,我们就要借助另一个工具,Bower

Bower做的事情:

“Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.” — Bower

而且,Bower针对前端应用做了优化。它拥有扁平的依赖关系树,对于每个包之请求一个版本,将页面加载的内容减到最低。

如何使用

安装

Bower处在NodeJs的生态圈里,它是Node的一个模块(包)。所以安装方法和普通node包安装方法一样。

1
npm install -g bower

其实,我也在纠结是安装在全局还是本地,网上众说风云。

命令工具

bower下载下来之后,你会发现它和grunt cli很像,除了模块部分,还有命令文件,因为它还是一个命令行工具。

使用bower install安装需要的依赖:

1
2
3
4
5
6
7
8
9
10
11
# registered package
$ bower install jquery

# GitHub shorthand
$ bower install desandro/masonry

# Git endpoint
$ bower install git://github.com/user/package.git

# URL
$ bower install http://example.com/script.js

bower.json

就和node一样,node有一个package.json来存储模块相关的信息,包括依赖。

bower也有自己的一个json文件,bower.json,通过命令bower init,可以在bower的提示下,完成对bower.json的填写。当运行bower init命令后,bower会询问你下面这些问题,来帮助你完成bower.json文件的初始化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
? name: (hello_grunt)
? version: (0.0.0)
? description: hello
? main file:
? what types of modules does this package expose?: (Press <space> to select)
❯◯ amd
  es6
  globals
  node
  yui
? keywords: hello
? authors: (benweizhu <xxxx@gmail.com>)
? license: (MIT)
? homepage:
? set currently installed components as dependencies?: (Y/n)
? add commonly ignored files to ignore list?:
? would you like to mark this package as private which prevents it from being accidentally
published to the registry?: (y/N) Y

{
  name: 'hello_grunt',
  version: '0.0.0',
  authors: [
    'benweizhu <xxxx@gmail.com>'
  ],
  description: 'hello',
  moduleType: [
    'node'
  ],
  keywords: [
    'hello'
  ],
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    angularjs: '~1.3.8'
  }
}

? Looks good?: (Y/n)

bower.json中要填写的信息包括:

1.name (required): The name of your package; please see Register section for how to name your package.
2.version: A semantic version number (see semver).
3.main string or array: The primary acting files necessary to use your package.
4.ignore array: An array of paths not needed in production that you want Bower to ignore when installing your package.
5.keywords array of string: (recommended) helps make your package easier to discover.
6.dependencies hash: Packages your package depends upon in production. Note that you can specify ranges of versions for your dependencies.
7.devDependencies hash: Development dependencies.
8.private boolean: Set to true if you want to keep the package private and do not want to register the package in the future.

安装并存储到bower.json

就和Grunt一样,bower也允许你将依赖下载下来,并存储到bower.json文件中

1
bower install angularjs --save

bower中的有用命令

1
2
3
4
5
6
bower list        --列出本地的包和可能的更新
bower cache clean --清除bower的依赖缓存
bower cache list  --列出bower的依赖缓存
bower update      --根据bower.json的内容将安装的包升级到最新版本
bower install     --安装bower.json中定义的依赖包
bower uninstall   --卸载已安装的依赖包

更多内容,请查看:http://bower.io/docs/api/

将bower和grunt集成

目前,github上面有很多grunt的插件可以将bower集成到grunt中。你可以去 https://www.npmjs.com/ 上搜索bower和grunt的关键字。

我这里使用的是:grunt-bower-task

安装很简单:npm install grunt-bower-task –save-dev

1
2
3
4
5
6
7
8
9
10
11
12
{
    "name": "relations-front-end",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-bower-task": "^0.4.0",
        "grunt-contrib-jshint": "~0.4.0"
    },
    "scripts": {
        "test": "grunt"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function (grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js', '!src/js/libs/**/*.js']
        },
        bower: {
            install: {
                options: {
                    targetDir: './src/js/libs'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default', ['bower:install', 'jshint']);

};

targetDir: ‘./src/js/libs’的作用是告诉task将bower下载的目标文件拷贝一份到哪个路径下

请参考:http://bower.io/docs/tools/