文書の過去の版を表示しています。
Ionic4でStorage利用でCRUDを写経してみる
目次
以下のサイトを写経してみたい
https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/
ソースコード
開発環境
Ionic4アプリの作成
C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@ でターミナルを開き、以下を入力。
ionic start ionic-notepad blank --type=angular // 何か聞かれたら、2回ともN + Enter とする。
C:/ionic4/ionic-notepad/ フォルダをVisualStudioCodeで開き、Ctrl+@ でターミナルを開き、以下を入力。
ionic serve
DetailPageの作成とNotesServiceの作成
ionic g page Detail ionic g service services/Notes
ルーティングの設定
Ionic3とIonic4ではルーティングがだいぶ変わっている。
src/app/app-routing.module.ts
（変更前）
（変更後）
HomePageを編集（１）
src/app/home/home.page.html
（変更前）
（変更後）
src/app/home/home.page.ts
（変更前）
（変更後）
Note interfaceの作成
src/app/interfaces/note.ts を新たに作成
Note service の実装と@inoic/storageのインストール
（変更前）
（変更後）
ionic serve し直すと以下のようなエラー。
@ionic/storage を利用するためには、@ionic/storageをnpm install –saveする必要があるとのこと。
Ctrl+C ⇒ y + Enterでサーバ停止し、ターミナルで以下を入力。
npm install @ionic/storage --save
ionic serve しておく。
src/app/app.module.ts
(変更前)
(変更後)
HomePageの編集
src/app/home/home.page.ts
(変更前)
(変更後)
参考リンク
写経元サイト