スポンサーリンク

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

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


(変更前)




(変更後)




　


　


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


（８）Viewing Items


ionic g page ItemDetail






app.modul.ts の修正


(変更後)




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


(変更前)




(変更後)




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


(変更前)




(変更後)




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


home.ts


(変更前)




(変更後)






　


（９）Saving Data Permanently with Storage


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


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



  






Angular4,Ionic3,Javascript
Posted by twosquirrel