今天，我们要讲的是angualr2的pipe这个知识点，但是在这之前我们需要升级一下我们的装备，因为之前的装备太“寒酸”了。

例子

这个例子包含两个pipe，一个是stateful，一个是stateless，是直接复制官方的例子。本例子还包含了我对 AngularClass/ angular2 - webpack -starter 这个牛逼starter的改写，我会详细讲解配置。

源代码

没有测试 AngularClass/ angular2 - webpack -starter

这里面包含了 Angular 2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod), Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Typings, and Webpack 等多方面的内容，堪称殿堂级的开发体验，快擦擦你的口水。

但是考虑到国内很多同学没有FQ，很多package装不了，我就删除了里面所有测试相关的npm依赖以及配置文件，如此一来，我可以保证每个同学都能顺利安装运行这个程序。另外，我们现在以学习为主，先不写测试代码。

但是值得一提的是，写测试是个很好的习惯，能很好的减少你的程序的bug率。

typings

在你安装完整个依赖后，会安装typings的依赖。这个typings是用来干嘛的？我们为什么要用typings安装一些依赖？先看看这篇文章吧！

在 TypeScript 中使用 JavaScript 类库

简单来说，我们要在typescript中用一些js类库，必须要用*.d.ts 声明文件, 为原有 JS 文件和现有 TS 项目搭桥，而typings和tsd都是来安装这些声明文件的！否则你的程序会报错！说什么什么没定义！

typedoc TypeDoc

这是官网，简单来说这是用来给你的ts程序生成文档的！你可以使用命令行来生成：npm run doc。

tslint

用于检查ts中的错误，俗称“去毛机”，可以让你养成良好的书写ts代码的习惯，比如类型和变量之间必须有空格：value: number。

webpack配置

这里我主要讲接口，因为webpack的插件太多了，用法也太多了，我们就直接复制拿来用，想了解具体配置的可以参考官网：

更详细的webpack配置参考

入口文件有两个，一是src/main.ts，它只是注入些依赖，启动了app而已！

二是src/polyfills.ts，这和我们在 angular2系列教程（一）hello world 里面讲到的是一模一样的，不过他帮我们写好了所有的import在一个文件中。这里不再赘述。

静态文件入口在src/assets，我们可以将我们的静态文件放在这个文件夹中，webpack会自动帮我们搬到服务里面，只需访问/assets即可！

html入口在src/index.html，里面包含了webpack用模板语法写的css、js引用，还有google分析，堪称完美！直接用直接用哈哈！

以上四个地方都是不需要更改的！直接拿来用！如果你心够大，甚至可以不搞懂里面配置，直接拿来用！但是我还是希望我们知其然知其所以然！

那么我们在哪里编写程序呢？在src/app中。这个文件夹中，除了app.ts只能改不能删之外，其他任何文件和文件夹都可以删除！

运行方法：

开发环境：npm start

生产环境：npm run build:prod   npm run server:prod

stateless pipe

装备升级完了，我们开始玩pipe。pipe就是ng1中的filter。先看看内建pipe吧：

currency

date

uppercase

json

limitTo

lowercase

async

decimal

percent

无需编写直接用！今天说了太多“直接用”哈哈！

pipe分为两种，一种是stateful，一种是stateless。我们先说stateless，stateless就是使用纯函数，不记住任何数据，也不会带来任何副作用。DatePipe就是stateless，我们再写个计算次方的pipe吧:

src/app/stateless/exponential-strength.pipe.ts

import {Pipe, PipeTransform} from 'angular2/core'; /* * Raise the value exponentially * Takes an exponent argument that defaults to 1. * Usage: * value | exponentialStrength:exponent * Example: * {{ 2 | exponentialStrength:10}} * formats to: 1024 */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, args: string[]) : any { return Math.pow(value, parseInt(args[0] || '1', 10)); } }

很简单，计算某个值的某次方， {{ 2 | exponentialStrength:10}}就是2的10次方。

写个模板测试下：

src/app/stateless/power-booster.component.ts

import {Component} from 'angular2/core'; import {ExponentialStrengthPipe} from './exponential-strength.pipe'; @Component({ selector: 'power-booster', template: ` <h2>Power Booster</h2> <p> Super power boost: {{2 | exponentialStrength: 10}} </p> `, pipes: [ExponentialStrengthPipe] }) export class PowerBooster { }

注入pipes: [ExponentialStrengthPipe] ，然后直接用！

stateful pipe

先看一个stateful pipe的例子吧：

src/app/stateful/fetch-json.pipe.ts

declare var fetch; import {Pipe, PipeTransform} from 'angular2/core'; @Pipe({ name: 'fetch', pure: false }) export class FetchJsonPipe implements PipeTransform { private fetchedValue: any; private fetchPromise: Promise<any>; transform(value: string, args: string[]): any { if (!this.fetchPromise) { this.fetchPromise = fetch(value) .then((result: any) => result.json()) .then((json: any) => this.fetchedValue = json); } return this.fetchedValue; } }

我们干了这些事：

将pure参数设为false

在成员函数transform中，执行fetch请求，将结果赋给 this.fetchedValue = json， 最后返回结果

如果this. fetchPromise这个成员变量已经被定义过，则直接返回成员变量 fetchedValue

写个模板测试下：