桃缶食べたい。

Ionic 2 をインストールする

Node.js をインストールする

# mkdir /usr/node
# chown momokan.momokan /usr/node

$ cd /usr/node
$ wget https://nodejs.org/dist/v6.9.4/node-v6.9.4-linux-x64.tar.xz
$ tar xvfz node-v6.9.4-linux-x64.tar.xz
$ ln -s node-v6.9.4-linux-x64 node

NODEJS_HOME=/usr/node/node

PATH=$PATH:$NODEJS_HOME/bin

$ source ~/.bash_profile

$ node -v
v6.9.4

Ionic 2 をインストールする

# npm install -g cordova ionic

$ ionic -v
2.2.1

Ionic 2 で空アプリを作る

Ionic2 プロジェクトを作る

$ ionic start --v2 helloIonic blank

Ionic2 プロジェクトをブラウザで動かす

$ cd helloIonic

$ ionic serve

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Hello Ionic.
</ion-content>

Ionic 2 プロジェクトの構造

src/index.html

src/app/app.html

src/app/app.module.ts

  imports: [
    IonicModule.forRoot(MyApp)
  ], 

import { MyApp } from './app.component';

src/app/app.component.ts

import { HomePage } from '../pages/home/home';

src/pages/home/home.ts

src/pages/home/home.html

Ionic 2 プロジェクトで独自ページを追加する

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

import { NavController } from 'ionic-angular';

import { ProductService } from '../../services/ProductService';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [ ProductService ]
})
export class SearchPage {
  products: Array<any>;

  constructor(public navController: NavController, private productService: ProductService) {
    
  }

  searchProducts(event, key) {
    this.products = this.productService.searchProducts(event.target.value);
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Search Page
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Search product.
  <ion-item>
    <ion-input type="text" placeholder="Search keyword" (input)="searchProducts($event, searchKey)"></ion-input>
  </ion-item>

  <ion-list>   
    <ion-item *ngFor="let product of products">
      <h2>{{product}}</h2>
    </ion-item>
  </ion-list>   
</ion-content>

export class ProductService { 
  
  constructor() {
    
  }
  
  searchProducts(keyword) {
    let products = [ 
            'White ' + keyword,
            keyword + '\'s ink.',
            'The ' + keyword + ' at the window'
        ];

    return products;
  }
}

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SearchPage } from '../pages/search/search';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SearchPage
  ],  
  imports: [
    IonicModule.forRoot(MyApp)
  ],  
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SearchPage
  ],  
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Hello Ionic!!

  <div>
    <button myitem (click)='goSearchPage();'>Search Product</button>
  </div>
</ion-content>

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

import { NavController } from 'ionic-angular';

import { SearchPage } from '../search/search';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navController: NavController) {
    
  }

  goSearchPage() {
    this.navController.push(SearchPage);
  }

}

追加した Ionic 2 独自ページを動かしてみる

Ionic 2 を使ってみて