Angular2中的Observable与Ionic2中的Provider、Promise

    随着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是navigation component（in the context of navigation）中的 decorators 。 

3. ReactiveX库中的Observable

    一个Observer向一个Observable来subscribe。Observable会通过调用observers的方法，向observers emits 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, Defer, Empty/Never/Throw, From, Interval, Just, Range, Repeat, Start, and Timer

    Transforming Observable Items

    Buffer, FlatMap, GroupBy, Map, Scan, and Window

    Filtering Observables

    Debounce, Distinct, ElementAt, Filter, First, IgnoreElements, Last, Sample, Skip, SkipLast,Take, and TakeLast

    Combining Observables

    And/Then/When, CombineLatest, Join, Merge, StartWith, Switch, and Zip

    Error Handling Operators

         Catch and Retry

    Utility Operators

       Delay, Do, Materialize/Dematerialize, ObserveOn, Serialize, Subscribe, SubscribeOn,TimeInterval, Timeout, Timestamp, and Using

    Conditional and Boolean Operators

    All, Amb, Contains, DefaultIfEmpty, SequenceEqual, SkipUntil, SkipWhile, TakeUntil, andTakeWhile

    Mathematical and Aggregate Operators

    Average, Concat, Count, Max, Min, Reduce, and Sum

    Converting Observables

    To

    Connectable Observable Operators

    Connect, Publish, RefCount, and Replay

    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