Atualizando o Ionic para a versão beta.8

Posted on Posted in Sem categoria

Olá! No dia 07/06/2016 a versão beta do Ionic foi atualizada para a versão 8.

Vamos ver aqui como atualizar sua versão.

 

Atualizando a versão

Abra sua linha de comando e digite o seguinte comando:

$ npm install g ionic@beta

Este comando irá atualizar o CLI do Ionic, que é o responsável por gerar novos projetos, assim se você criar um novo projeto ele já estará na versão beta.8

 

Atualizando um app que está na versão beta.7

Para atualizar seus apps que estão na versão beta.7 serão necessários alguns passos.

  • Na pasta de seu projeto, procure o arquivo “package.json” na raiz do projeto;
  • Dentro do arquivo substitua  a linha “ionic-angular”: “2.0.0-beta.7” por  “ionic-angular”: “2.0.0-beta.8”;
  • Altere a linha “ionic-native”: “^1.1.0” para “ionic-native”: “1.2.4”;
  • Utilizando a linha de comandos, entre na pasta raiz do seu projeto e rode o comando npm install

Todos os arquivos necessários para funcionar a versão beta.8 foram baixados, mas esta versão trás algumas mudanças que podem “quebrar” seu app que estava na versão beta.7 então algumas alterações manuais são necessárias. Segue:

 

  • Alterar todas as instâncias de @Page por @Component:

Antes:

import {Page} from 'ionic-angular';

 @Page({ 

})

Depois:

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

@Component({

})

 

 

  • Substituir o @App por @Component e então inicializá-lo com o método ionicBootstrap. Mover todas as configurações para este método:

Antes:

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

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

}

Depois:

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'
});

 

 

  • Renomear IonicApp para App:

Antes:

import {IonicApp} from 'ionic-angular';

constructor(
  private app: IonicApp
) {

}

Depois:

import {App} from 'ionic-angular';

constructor(
  private app: App
) {

}

 

 

  • Alguns eventos de ciclo de vida da página foram renomeados, como por exemplo:

Antes:

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

Depois:

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

 

 

  • Alguns eventos também tiveram seu nome alterado, como por exemplo:

Antes:

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

Depois:

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

 

 

Eventos de ciclo de vida renomeados

Todos os eventos de ciclo de vida da página foram renomados e deixa de começar com onPage para começar com ionView

  • onPageLoaded renomeado para ionViewLoaded
  • onPageWillEnter renomeado para ionViewWillEnter
  • onPageDidEnter renomeado para ionViewDidEnter
  • onPageWillLeave renomeado para ionViewWillLeave
  • onPageDidLeave renomeado para ionViewDidLeave
  • onPageWillUnload renomeado para ionViewWillUnload
  • onPageDidUnload renomeado para ionViewDidUnload

 

 

Eventos de componentes renomeados

Todos os eventos de componentes foram renomeados para iniciarem com ion.

  • 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

Mais informações podem serem encontradas aqui.

6 thoughts on “Atualizando o Ionic para a versão beta.8

    1. O @Page era um decorator do próprio Ionic para indicar que a classe era uma página. Eles resolveram abandonar e utilizar o decorator padrão do Angular2 que é @Component.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *