Ionic3でlocalStorageを試してみる（１）

2017年5月1日

（2017/7/9追記）

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

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

前回、ionic@storage がうまく使用できなかった。

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

具体的には、Andoroidスマホにインストールしても、値が保存されなかった。

ionicのstorageがうまく使用できていないのか、コードがちゃんと書けていないのか原因は不明だが、とりあえず、下記サイトの写経にtryしてみる。

Build a Todo App from Scratch with Ionic 2 & 3
Josh Morony · April 6, 2017
https://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/

Angular 2 (, Angular 4, ionic3)に関してお勧めの本は以下。

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

（０）注意点

http://stackoverflow.com/questions/42788623/local-storage-in-ionic-2-error

https://github.com/driftyco/ionic-storage/releases/tag/v2.0.0

(意訳)

Ionic 2.2.0以降、@ionic/storge version 2.0.0　が推奨されている。
app.module.ts　の設定が変更となった。

（１） Remove Storage from providers

（２）import statementを、
import { IonicStorageModule } from ‘@ionic/storage’;

（３）imports array: に、以下を追加する。
IonicStorageModule.forRoot()

Imports: [
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot()
]

（１）ionic3アプリの作成

ionic start ionic-todo-storage blank –v2

cd ionic-todo-storage

ionic serve

（２）src/pages/home.html

(変更前)

(変更後)

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

(変更前)

(変更後)

items を定義
ionViewDidLoad() 関数という、ページがloadされると同時に呼び出される関数を使用して、itemsに、（titleとdescriptionをキーとする連想配列を要素とする）配列を代入（？）している。

（４）NavControllerサービスをimportしているため、pushとpopという関数によって、ページ遷移ができるようになるらしい。。。

this.navCtrl.push(SOME_PAGE);
this.navCtrl.pop();

Adding Items

titleとdescriptionを持つform（フォーム）を作成する

ionic g page Additem

pages/　フォルダに、add-item フォルダと、その下に４つのファイルが作成される。

src/app/app.module.ts の修正

(変更前)

(変更後)

写経元の、
https://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/

では、

import { AddItemPage } from '../pages/add-item/add-item';

となっていたが、以下のようなエラーが出たので、src/pages/add-item/add-item.ts　を見てみると、たしかに、15行目が、「export class AddItem {」となっていたので、app.module.tsの、「AddItemPage」のところを、

import { AddItem } from ‘../pages/add-item/add-item’;

のように、すべて、「AddItem」に変更したところ、うまくいった。

（５）Setting up the Add Item Template

add-item.htmlを修正

(変更前)

(変更後)

この、[(ngModel)]という表記が、two-way data bindingをセットアップしてくれるらしい。。。

titleフィールドへの入力が、すぐに、add-item.tsの中の、this.title　メンバーvariable（変数？）に反映されるらしい。

右上のプラスボタンをクリックしても、以下のようなエラー

これから、add-item.tsを変更して、Add Itemクラスを作成する。

（６）add-item.ts

(変更前)

(変更後)

ViewControllerというサービスをimportしている。
saveItem()関数を定義して、newItemオブジェクトをセットアップしている。
newItemオブジェクトは、titleと、descriptionという値を持っている。これは、two-way data bindingでインプットフィールドに入っているものである。

（７）Saving Items in the Home Page

src/pages/home/home.ts

(変更前)

(変更後)

home.tsに、AddItemコンポーネントをimportして、home.htmlでプラスボタンをクリックしたときに、AddItemビューが表示されるようにする。
詳細はさっぱり分からないが、Page間でtitle, descriptionの値をやり取りするのに、Modalと、onDidDismss listenerを用いるらしい。。。
saveItem()関数は、add-item.tsで定義されているが、add-itm.htmlで、Saveボタンがクリックされると同時に、home.htmlにページ遷移（そのとき、配列itemsに入っているすべてのitemを入れたもの？？？）する。

ここで、home.html　のsaveItem()　のI　を、i と小文字で記載してしまっていたことに気付いた。

(変更前)