スポンサーリンク

ionic3でTodoアプリ(1)

(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

image

(0)Ionic CLIのアップデート

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

npm uninstall -g ionic

npm install -g ionic

image

image

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

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

sudo npm update -g ionic

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

Ionic3は入るのだろうか?

(1)ionic3-todoアプリの作成

ionic start ionic3-todo –v2

image

image

ionic 3.0.1 になっている。

cd ionic3-todo

ionic serve

image

image

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

(2)src/pages/home/home.html

(参考)

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

(変更前)
image

(変更後)
image

(3)src/pages/home/home.ts

(変更前)
image

(変更後)
image

image

(4)Adding New Page : Items

ionic g page AddItemPage

image

(5)src/app/app.module.ts

(変更前)
image

(変更後)
image

image

(6)src/pages/tabs/tabs.html

image

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

src/pages/tabs/tabs.ts

image

(7)Setting up the AddItem View

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

(変更前)
image

(変更後)
image

image

(8)src/pages/add-item-page/app-item-page.ts

(変更前)
image

(変更後)
image

image

(9)Saving Items in the Home Page

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

image

image

ionic serve してみる

image

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

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

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

image

を消せとのこと。消去。

image

image

image

image

(10)Viewing Items

ionic g page ItemDetailPage

image

image

image

image

image

image

image

 

 

途中

スポンサーリンク