是否升级至 ionic2

[pengkobe]

各位可以评论该 Issue. 发表自己的意见。:)，此Issue持续更新...

学习资料推荐

Angular2.0视频 by 大漠穷秋，可以跟着项目一起实践。

[pengkobe]

Angular

概念转换

• filter to pipe
• $rootscope/$scope 消失
• Dom操作方式大改
  • ng1直接使用 Angular.element
  • ng2
    • (暂不知道咋用)

      import { DOM } from 'angular2/src/platform/dom/dom_adapter';
      DOM.addClass(DOM.query("body"), 'fixed');

    • directive中这样用?

      this.el.nativeElement.style.color=color;

事件机制

以下基本上用的是 broadcast 结合 on 使用( 一定程度上造成了写法的混乱，代码都不见了 )，
现在是 emit 结合 subcribe 使用。

组件/指令

angular2 引入了组件 @component(带模板,相当于1.x中的directive)，细分了两种指令

• 结构性 ngIf
• 属性型 ngClass

迁移案例( accordion ):http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/
Angular1.x : http://plnkr.co/edit/tYPUDDJwFMsjWjyDznwt
Angular2 : http://plnkr.co/edit/Fs4oR956gd6gQmHdFhHS?p=info

• 再也没有 Controllers 和 Link 函数了.
• Even when the new html syntax is weird at first, makes our directive really straightforward to use.
• 再也没有 =, @ and &.
• Using a parent directive is as easy as injecting it.
• Lot of lifecycle hooks to customize easily our directives.
• 选择器类型更多了.
• 不要在考虑隔离作用域.
• “Transclusion” 的作用体现出来了.

directive

参考：http://blog.csdn.net/shenlei19911210/article/details/53218074
elem.nativeElement 对象到底是什么，需要整清楚

细节

参考链接：https://angular.cn/docs/ts/latest/api/

• 使用 GlobalService 来代替 $rootscope

  $rootscope.key = value
  # 转换为
  globalservice.set(key,value);

• angular.extend 重写至 Util
• ng-click 修改为 (click)
• ng-class 修改为 [ngClass]
• ng-repeat 使用 ngFor 来替代，track by index 替换为;$index = index (个人思考),使用示例:

  <!-- cities:数组。c:变量.index:索引 -->
  <div class="ui list" *ngFor="#c of cities;#num = index""> 
      <div class="item">{{num+3}}{{ c }}</div>
  </div>

• ng-show，消失了，建议用 *ngIf 或者 [hidden] 代替
• ng-src，消失了，建议用 src 代替,绑定使用 [src]
• ng-controller，消失了
• ng-include，消失了

[pengkobe]

Cordova

ionic2 引进了 ionic-native,去掉了以前的构建方式，当前插件的安装方式并没变，还是需要手动进行安装。
文档:http://ionicframework.com/docs/v2/native/

细节

• isIOS 变成 is("ios")
• cordova.plugins.notification.local 变成 Localnotification,注意属性都是静态类型。
• 并不支持：com.applurk.cordova-screen-locker

ionic-native

文档:http://ionicframework.com/docs/v2/native/

• import { Keyboard } from 'ionic-native';

案例

安装

npm install --save ionic-native
ionic plugin add cordova-plugin-datepicker

使用

import {DatePicker} from 'ionic-native';
constructor(platform: Platform) {
  platform.ready().then(() => {
    let options = {
      date: new Date(),
      mode: 'date'
    }

    DatePicker.show(options).then(
      date => {
        alert('Selected date: ' + date);
      },
      error => {
        alert('Error: ' + error);
      }
    );
  });
}
// 上述代码可以替换
if (window.cordova) {}

参考链接:http://stackoverflow.com/questions/35815279/ionic-2-datepicker

[pengkobe]

Ionic

配置

• $ionicConfigProvider不见了，代替它的为:http://ionicframework.com/docs/v2/api/config/Config/

  IonicModule.forRoot(MyApp, {
    backButtonText: 'Go Back',
    iconMode: 'ios',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    tabsPlacement: 'bottom',
    pageTransition: 'ios'
  }, {}
  )],

事件

参考链接：http://ionicframework.com/docs/v2/api/util/Events/

// 引入
import {Events} from 'ionic-angular'
// DI
public events: Events
// 使用
events.publish('user:created', user, Date.now());
events.subscribe('user:created', (user, time) => {
  // user and time are the same arguments passed in `events.publish(user, time)`
  console.log('Welcome', user, 'at', time);
});

路由

// 导入
 imports: [
    IonicModule.forRoot(MyApp, {}, {
      links:ROUTES
    })
  ]
// ROUTES
[ { path: 'home',  component: HomePage }]
// 使用
import { NavController } from 'ionic-angular';
this.navCtrl.push(AboutPage, {});

组件

• ion-slides,看上去没啥变化,可是事件属性都有很大变化
• ionicLoading 变成 LoadingController
• ...