Ionic3でlocalStorageを試してみる(1)

(2017/7/9追記)

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

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


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

Ionic3で計算アプリを写経してみる
(2017/6/18 追記) 2017/5/9に、Ionic CLI v3がリリースされたため、ソースコードを若干書き直して、以下にア...

具体的には、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

(0)注意点

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

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

(意訳)

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

(1) Remove Storage from providers

(2)import statementを、
import { IonicStorageModule } from ‘@ionic/storage’;

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

(1)ionic3アプリの作成

ionic start ionic-todo-storage blank –v2

cd ionic-todo-storage

ionic serve

image

image

image

(2)src/pages/home.html

(変更前)
image

(変更後)
image

image

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

(変更前)
image

(変更後)
image

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

image

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

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

Adding Items

titleとdescriptionを持つform(フォーム)を作成する

ionic g page Additem

image

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

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

(変更前)
image

(変更後)
image

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

では、

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

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

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

image

image

image

(5)Setting up the Add Item Template

add-item.htmlを修正

(変更前)
image

(変更後)
image

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

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

image

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

image

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

(6)add-item.ts

(変更前)
image

(変更後)
image

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

image image

(7)Saving Items in the Home Page

src/pages/home/home.ts

(変更前)
image

(変更後)
image

image

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 と小文字で記載してしまっていたことに気付いた。

(変更前)
image

(変更後)
image

image image

image image

これで、titleとdescriptionを追加できるようになった。

(8)Viewing Items

image

image

app.modul.ts の修正

(変更後)
image

src/pages/item-detail/item-detail.html

(変更前)
image

(変更後)
image

src/pages/item-detail/item-detail.ts

(変更前)
image

(変更後)
image

home.ts に、viewItem(item)関数を定義して、ItemDetailページに遷移するようにする。

home.ts

(変更前)
image

(変更後)
image

image

image image

(9)Saving Data Permanently with Storage

ここからなのに、、、続きは以下に記載。

Ionic3でlocalStorageを試してみる(2)
前回は、まだTodoアプリの作成途中で、localStorageまでたどりついていなかった。 引き続き、以下のサイトを写経して...
関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする