ionic3でTodoアプリ（１）

2017年4月13日

（2017/7/9追記）

ionic3の目次については、以下のサイトのサイドバーをご覧ください。

http://twosquirrel.mints.ne.jp/dokuwiki/doku.php/index.html

---

(2017/6/19追記)

以下に、local storageを用いたtodoアプリ（Create, Read, Delete機能のみ）を作成したときのリンクを貼らせて頂きます。

http://twosquirrel.mints.ne.jp/?p=18083

---

前回、Angula4のTodoアプリのサイトを写経してみた。

今回は、これをそっくり真似して、ionic2でTodoアプリを作りたい

http://twosquirrel.mints.ne.jp/?p=15808

世界初!?Angular4を使ってtodoMVCよりも先にtodoアプリを作ってみた
komatsu-kenta
2017年04月06日に更新
http://qiita.com/komatsu-kenta/items/1d29469100355c20a600

Angular 2 (, Angular 4, ionic2)に関しては、以下の本がおすすめ！

（環境）
Windows8.1
Node 6.9.1
cordova 6.5.0
Ionic 2.2.2
VisualStudioCode
Git 2.8.1

（０）Ionic CLIのアップデート

http://ionicframework.com/docs/v1/cli/install.html

npm uninstall -g ionic

npm install -g ionic

あれ、変わっていない、、、

本当は、以下でよかったらしい。。。

sudo npm update -g ionic

https://forum.ionicframework.com/t/how-to-update-cordova-and-ionic/3736/5

Ionic3は入るのだろうか？

（１）ionic3-todoアプリの作成

ionic start ionic3-todo –v2

ionic 3.0.1　になっている。

cd ionic3-todo

ionic serve

Ctrl+C , y, Enter でサーバ停止

（２）src/pages/home/home.html

（参考）

http://irekasoft.com/blog/ionic-2-todo-app

（変更前）

（変更後）

（３）src/pages/home/home.ts

（変更前）

（変更後）

（４）Adding New Page : Items

ionic g page AddItemPage

（５）src/app/app.module.ts

（変更前）

（変更後）

（６）src/pages/tabs/tabs.html

参考：http://ionicframework.com/docs/ionicons/

src/pages/tabs/tabs.ts

（７）Setting up the AddItem View

src/pages/add-item-page/add-item-page.html

（変更前）

（変更後）

（８）src/pages/add-item-page/app-item-page.ts

（変更前）

（変更後）

（９）Saving Items in the Home Page

src/pages/home/home.ts をさらに変更

ionic serve してみる

何このエラー？ionic g page AddImagePage　したときに、add-image-page.module.ts が作成されて、嫌な予感がしていたのです。。。

https://github.com/driftyco/ionic/issues/11082

何？バグ？やっぱり新しいバージョンはあまり、触れない方がよいのかな。。。

を消せとのこと。消去。

（１０）Viewing Items

ionic g page ItemDetailPage

 

 

途中