文書の過去の版を表示しています。

181109 Ionic4でクイズアプリにtry

写経元サイト

npm install -g ionic

C:/ionic4/ フォルダを、VisualStudioCodeで開いて、Ctrl+@でターミナルを開いて、以下を入力。

ionic start ionic4-kids-quiz blank --type=angular
// ? Install the free Ionic Pro SDK and connect your app? と聞かれたら、 N + Enter

一度、VisualStudioCodeを閉じてから、
C:/ionic4/ionic4-kids-quiz/ フォルダを、VisualStudioCodeで開いて、Ctrl+@でターミナルを開いて、以下を入力。

ionic serve -l
// ? Install @ionic/lab? と聞かれたら、 Y + Enter

serviceの作成は、Ionic3ではionic g provider でしたが、Ionic4では、ionic g service になりました。

ionic g component components/FlashCard
ionic g service services/Data

いきなりSCSSのコピペでがっくりだが、ここは我慢して、
https://www.joshmorony.com/create-a-data-driven-quiz-app-in-ionic-2-part-1/　の、flash-card.scssをコピペする。

src/components/flash-card.scss

(変更後)

src/components/flash-card/flash-card.html

(変更前)

(変更後)

src/components/flash-card/flash-card.ts

(変更前)

(変更後)

このflash-card componentは、後で、以下の記載でHomePageに埋め込む予定である。

<flash-card [isFlipped]="someVariableWeToggle"></flash-card>