curso-iniciando-ionic-2

Repositório do Curso de Ionic 2

Guia de atualizações do Ionic 2

Este guia tem o intuito de informá-lo(a) sobre as atualizações realizadas no framework Ionic 2 na última versão beta (2.0.0-beta.11) para que você possa acompanhar o curso e implementar os exemplos de acordo com as novas regras.

O guia irá mostrar como era o código quando o curso foi gravado e como é nessa versão, um antes e um depois, para que você faça apenas as alterações que forem necessárias e não obtenha nenhum erro na aplicação.

1. Component <ion-navbar>

Antes

    <ion-navbar *navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Alert Component</ion-title>
    </ion-navbar>

    <ion-content padding class="alert">
      <p>Seu conteúdo aqui</p>
    </ion-content>

Depois

  <ion-header>
    <ion-navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Alert Component</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content padding class="alert">
    <p>Seu conteúdo aqui</p>
  </ion-content>

2. Component <ion-toolbar>

Antes

    <ion-navbar *navbar>
      <ion-title>Toolbar Component</ion-title>
    </ion-navbar>

    <!-- toolbar no topo -->
    <ion-toolbar></ion-toolbar>
    <!-- ou -->
    <ion-toolbar position="top"></ion-toolbar>

    <ion-content padding class="toolbar">
      <p>Seu conteúdo aqui</p>
    </ion-content>

    <!-- toolbar no rodapé [após o conteúdo] -->
    <ion-toolbar position="bottom"></ion-toolbar>

Depois

  <ion-header>
    <ion-navbar>
      <ion-title>Alert Component</ion-title>
    </ion-navbar>
    <!-- toolbar no topo -->
    <ion-toolbar></ion-toolbar>
  </ion-header>

  <ion-content padding class="toolbar">
    <p>Seu conteúdo aqui</p>
  </ion-content>

  <ion-footer>
    <!-- toolbar no rodapé -->
    <ion-toolbar></ion-toolbar>
  </ion-footer>

3. Component Alert para AlertController

Antes

import {NavController, Alert} from 'ionic-angular';

export class AlertPage {

  constructor(public nav: NavController) {}

  showAlert() {
    let alert = Alert.create({
      title: 'Ionic 2',
      message: 'Meu primeiro alert',
      buttons: ['OK']
    });

    this.nav.present(alert);
  }

}

Depois

import {AlertController} from 'ionic-angular';

export class AlertPage {

  constructor(public alertCtrl: AlertController) {}

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'Ionic 2',
      message: 'Meu primeiro alert',
      buttons: ['OK']
    });

    alert.present();
  }

}

4. Component Modal para ModalController

Antes

import {NavController, Modal} from 'ionic-angular';
import {ModalLoginPage} from './../modal-login/modal-login';

export class ModalTestPage {
  constructor(public nav: NavController) {}

  openModal() {
    let modal = Modal.create(ModalLoginPage);

    this.nav.present(modal);
  }

}

Depois

import {ModalController} from 'ionic-angular';
import {ModalLoginPage} from './../modal-login/modal-login';

export class ModalTestPage {
  constructor(public modalCtrl: ModalController) {
  }

  openModal() {
    let modal = this.modalCtrl.create(ModalLoginPage);
    modal.present();
  }
}