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チュートリアルに従ってみましょう。
import { Component } from '@angular/core';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
title = "Tour of Heroes";
}
<h1>{{title}}</h1>
だいぶ物寂しくなりました。
アプリケーションのスタイルを追加する
チュートリアルにあるcssのコードを、そのままapp.scssに貼り付けてみます。
ほんのちょっとだけ豪華になりました。