Ionicには実際にアプリケーションを作成してみるチュートリアルがない!

(少なくとも公式には)無い。無かった。
なので、Angular4のチュートリアルを読んでIonicで実行してみる。
チュートリアルページはこちら。
https://angular.jp/tutorial
日本語化されてるので(久しぶりに)日本語で読めるぞ!
前提として、ionicのblankプロジェクトを作成しておいてください。

チュートリアル: ツアー・オブ・ヒーローズ

ツアー・オブ・ヒーローズ チュートリアルはAngularの基礎をカバーしています。
このチュートリアルでは人材派遣会社がヒーローの集合を管理するためのアプリケーションを開発します。
なるほど。それにしても用意されてるヒーローがアメコミ過ぎてあんまりピンとこない。

チュートリアルでは下記を扱うらしい。

  • 要素を表示・隠蔽する、そしてヒーローデータのリストを表示するための組み込みAngularディレクティブを使う。
  • ヒーローの詳細やヒーローのリストを表示するためのAngularコンポーネントを作成する。
  • 読み取り専用データのための単方向データバインディングを使用する。
  • 双方向データバインディングを用いて、モデルを更新するための編集可能なフィールドを設置する。
  • キー入力やクリックといったユーザーのイベントに対しコンポーネントがもつメソッドをバインドする。
  • ユーザーがマスターリストからヒーローを選択し、詳細画面でそのヒーローを編集できるようにする。
  • パイプによりデータを整形する。
  • ヒーローを組み立てるための共有サービスを作成する。
  • さまざまなビューとそれらのコンポーネント間を遷移可能にするためにルーティングを使用する。

チュートリアルページには実際の動作イメージのアニメーションがありますのでぜひ見てみることをおすすめする。

アプリケーションシェル

ionicのチュートリアルでそこはやったので、AngularCLIの利用の仕方はパス。

アプリケーションのタイトルを変更する

ファイル名が違います。(まずionicのスタートプロジェクトとAngularのスタートプロジェクトが違うと思うので…)

app.component.ts → app.component.ts : TypeScriptで書かれたコンポーネントクラスのコードです。
app.component.html → app.html : HTMLで書かれたコンポーネントのテンプレートです。
app.component.css → app.scss : このコンポーネント専用のCSS(scss)です。
よく見るとcssからscssに変わっているので、全く同じではないです。が、今のところはあまり気にしないでください。

コンポーネントクラスファイル(app.component.ts)を開き、titleプロパティの値をTour of Heroesに変更してください。
ionicのblankプロジェクトでは、なんやかんや色々書いていますが、ここでは
下記のように変えます。
ionic由来のものも全て消して完全にAngularチュートリアルに従ってみましょう。

app.component.ts
import { Component } from '@angular/core';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  title = "Tour of Heroes";
}

app.html
<h1>{{title}}</h1>

image.png
だいぶ物寂しくなりました。

アプリケーションのスタイルを追加する

チュートリアルにあるcssのコードを、そのままapp.scssに貼り付けてみます。

image.png

ほんのちょっとだけ豪華になりました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.