随着Inoic Beta6的发布[1]，对其中的一些技术细节， 重点是ReactiveX库,Angular2中的Observable,Ionic2中的Provider（或Service）、Promise做了初步的分析。

1. 如何查看app使用的是哪一个Ionic版本[1]

方法1: 查看app使用的ionic库版本：npm view ionic-angular version

方法2:查看app根目录下的package.json文件，可以看到版本依赖关系，例如：

"ionic-angular": "2.0.0-beta.6"

2.Components 与 Pages有哪些差异

参照[2,3],pages是navigationcomponent（in the context of navigation）中的decorators。

3. ReactiveX库中的Observable

一个Observer向一个Observable来subscribe。Observable会通过调用observers的方法，向observersemits items或发送通知，“observer”也被称为“subscriber,” “watcher,” 或“reactor.”，通常被称为观察者模式、reactor模式等[6]。

Observables 和Observers仅仅是ReactiveX库的起点，它不仅仅只是对标准的观察者模式的一个小小的扩展，它更适于处理一系列事件而不只是一次回调函数的调用。

真正强大之处在于“reactive extensions” (因此这个库被命名为“ReactiveX”) — 可以对Observable发布的一系列items来做大量操作：transform,combine,manipulate等等。

这些Rx operators就可以用declarative方式将异步序列组合起来，这样既有回调函数的高效率，又避免了嵌套回调handlers在异步处理中典型的缺陷。这些operators包括：

??????Creating Observables??????

Create,DeferEmpty/NeverThrowFromIntervalJustRangeRepeatStartTimer

Transforming Observable Items

BufferFlatMapGroupByMapScanWindow

Filtering Observables

DebounceDistinctElementAtFilterFirstIgnoreElementsLastSampleSkipSkipLastTakeTakeLast

Combining Observables

AndThenWhenCombineLatestJoinMergeStartWithSwitchZip

Error Handling Operators

CatchandRetry

Utility Operators

DelayDoMaterializeDematerializeObserveOnSerializeSubscribeSubscribeOnTimeIntervalTimeoutTimestampUsing

Conditional and Boolean Operators

AllAmbContainsDefaultIfEmptySequenceEqualSkipUntilSkipWhileTakeUntilTakeWhile

Mathematical and Aggregate Operators

AverageConcatCountMaxMinReduceSum

Converting Observables

To

Connectable Observable Operators

ConnectPublishRefCountReplay

Backpressure Operators

a variety of operators that enforce particular flow-control policies

许多operators处理Observable并返回Observable，这样这些operators就可以链式一个接一个调用。在链中的每个operator 处理的不是初始的Observable,而是在修改Observable后，将修改后的Observable依次传给下一个operator.

Builder模式也是类似地链式调用，但Builder模式中链中方法顺序是无关的，而Observable operators顺序是相关的。

ReactiveX库有Java实现RxJava，有JavaScript实现RxJS。

4. Angular2中的Http Service与Observable

Angular 1中使用Promise异步加载数据，但在Angular 2中使用Observable来处理异步请求 ，Observable类由ReactiveX库提供。 Angular 2中的Http service是Angular 1中$http的继承者,http.get( )方法不再返回一个Promise,而是返回一个Observable对象。

ngOnInit(){
this.getFoods();
}
getFoods(){
this.http.get('/app/food.json')
.map((res:Response)=>res.json())
.subscribe(
data=>{this.foods=data},err=>console.error(err),()=>console.log('done')
);
}

调用http.get( )来执行HTTP请求，返回一个Observable对象，这样就可以使用map( )方法来配置待处理的数据， 使用subscribe( )方法来观察处理结果。

由于Angular不知道需要将response解析为JSON，需要使用 .map((res:Response) => res.json()) 调用来让Angular知道. 这个map( )方法也返回一个Observable,这样就可以使用method chaining.

调用subscribe( ) 方法来接收output，其中的三个参数都是event handler. 分别是onNext,onError,和onCompleted.

• onNext方法接收HTTP响应数据. Observables支持数据流，可以多次调用这个event handler。但对于HTTP请求数据，Observable通常是在一个调用中就返回所有数据。

• 如果HTTP请求返回一个诸如404的错误码，则onError event handler被调用。

• 当Observable将所有的数据都返回完成后，执行onCompleted event handler。这在Http.get() 调用中很少使用，因为需要的所有数据都传入到onNext handler。

这三个参数中，onError 和onCompleted是可选参数，但通常onError不能省略，否则一个未捕获的Error会导致应用停止执行。

5. Ionic2中的Provider、Service、Observable与Promise

Ionic2中Provider也就是一个Service,可以用ionic g provider PeopleService命令来生成一个名称为PeopleService的provider 。

Observable相对Promise有许多优势，因此Angular2中使用了RxJS。而当前Ionic中生成provider代码时使用的是ng2中的http模块，它是个observable,但then( )返回将它转为一个promise返回,ionic团队正在计划修改。

6. ionic-native与ngCordoava

Ionic 2中ionic-native替换了ngCordoava。

参考资料:

[1] Announcing the Release of Ionic 2 Beta 6!,http://blog.ionic.io/announcing-the-release-of-ionic-2-beta-6/

[2]10 Minutes with Ionic 2: Calling an API,http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

[3] Ionic Docs Nav,http://ionicframework.com/docs/v2/api/components/nav/Nav/

[4]Refactor provider generator to use observables properly #5532,https://github.com/driftyco/ionic/issues/5532/

[5]Angular 2: HTTP,Observables,and concurrent data loading,http://www.metaltoad.com/blog/angular-2-http-observables

[6]Observable,http://reactivex.io/documentation/observable.html

[7]Reactor Guide 中文翻译，http://reactor.jervyshi.me/index.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!