Menu

Ionic2 release beta8

releaseionic2 - June 07, 2016 por Nicolas Molina

Hola a todos!

Ionic2 a lanzado su mas reciente versión beta 8, que trae cambios importantes y soporte para Progressive Web App, aqui los más importantes:

  1. Popover y Ranges tienen nuevas características.
  2. Removieron el decorador @App y @Page a favor del uso @Component.
  3. IonicApp renombrado por App.
  4. Ahora ionicBootstrap será requerido, para el punto inicial de la App y el tercer parametro sera donde enviamos las configuraciones.
  5. Han renombrando el ciclo de vida de la app.
  6. También todo sus eventos fueron renombrados para cada uno de sus componentes anteponiendo ion en todos los eventos.

Aqui todos los cambios:

Ionic Lifecycle Events Renamed

  • onPageLoaded renamed to ionViewLoaded
  • onPageWillEnter renamed to ionViewWillEnter
  • onPageDidEnter renamed to ionViewDidEnter
  • onPageWillLeave renamed to ionViewWillLeave
  • onPageDidLeave renamed to ionViewDidLeave
  • onPageWillUnload renamed to ionViewWillUnload
  • onPageDidUnload renamed to ionViewDidUnload

Ionic Component Events Renamed

  • Checkbox
    • change -> ionChange
  • DateTime
    • change -> ionChange
    • cancel -> ionCancel
  • InfiniteScroll
    • infinite -> ionInfinite
  • Menu
    • opening -> ionDrag
    • opened -> ionOpen
    • closed -> ionClose
  • Option
    • select -> ionSelect
  • Picker
    • change -> ionChange
  • RadioButton
    • select -> ionSelect
  • RadioGroup
    • change -> ionChange
  • Refresher
    • refresh -> ionRefresh
    • pulling -> ionPull
    • start -> ionStart
  • Searchbar
    • input -> ionInput
    • blur -> ionBlur
    • focus -> ionFocus
    • cancel -> ionCancel
    • clear -> ionClear
  • Segment
    • change -> ionChange
    • select -> ionSelect
  • Select
    • change -> ionChange
    • cancel -> ionCancel
  • Slides
    • willChange -> ionWillChange
    • didChange -> ionDidChange
    • move -> ionDrag
  • TabButton
    • select -> ionSelect
  • Tab
    • select -> ionSelect
  • Tabs
    • change -> ionChange
  • Toggle
    • change -> ionChange

Pasos para actulizar hacia Beta 8.

Remplazar todas las intancias de @Page con @Component

import {Page} from 'ionic-angular';

@Page({

})

remplazar con:

import {Component} from '@angular/core';

@Component({

})

Remplazar @App con @Component, agregando la función ionicBootstrap al final con su config.

import {App, Platform} from 'ionic-angular';

@App({
  templateUrl: 'build/app.html',
  providers: [ConferenceData, UserData],
  config: {
    tabbarPlacement: 'bottom'
}
export class MyApp {

}

remplazar con:

import {Component} from '@angular/core';
import {ionicBootstrap, Platform} from 'ionic-angular';

@Component({
  templateUrl: 'build/app.html',
})
export class MyApp {

}

// Pass the main app component as the first argument
// Pass any providers for your app in the second argument
// Set any config for your app as the third argument:
// http://ionicframework.com/docs/v2/api/config/Config/

ionicBootstrap(MyApp, [ConferenceData, UserData], {
  tabbarPlacement: 'bottom'
});

Renombrar cualquier uso de IonicApp por App.

import {IonicApp} from 'ionic-angular';

constructor(
  private app: IonicApp
) {

remplazar con:

import {App} from 'ionic-angular';

constructor(
  private app: App
) {

Renombrar cualquier uso del ciclo de vida.

onPageDidEnter() {		 
  console.log("Entered page!");
}

remplazar con:

ionViewDidEnter() {		 
  console.log("Entered page!");
}

Renombrar los eventos de ionic.

<ion-slides (slideChangeStart)="onSlideChangeStart($event)">

remplazar con:

<ion-slides (ionWillChange)="onSlideChangeStart($event)">

¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Nicolas Molina

¡Compártelo!

Nunca te pierdas una Noticia.