AngularからIonicに変更したときの注意点

サイトをリニューアルしました。

自作PC 見積もり v3 | ZIPIDEをIonicに変更しました。正確にはIonic2でUIの変更がメインで機能的な部分はそのままです。UI部分以外はほぼコピペで行けたので作業時間は30時間ぐらいでしょうか。作業中に気づいた注意点をいくつかメモ。

Angularの知識は必須

Ionic2は内部でAngularを使用しています。なのでAngularの知識が無いとコーディングできません。基礎的なcomponent、pipe、directive、serviceは全く同じです。またIonic公式サイトにはここらへんのdocumentはほぼ皆無です。なのでIonicを使用するにはAngularの知識が必要となります。

providerと言うもの

「Ionicのprovider」=「Angularのservice」です。何故が名称が違いますが機能は全く同じ。統一してくれー!

pageと言う概念

Angularにはpageと言う概念はありません。IonicはスマホアプリのようなUIにするのが前提です。スマホアプリは1画面毎にページが切り替わります。Ionicではpageと呼ばれていますが、画面全体を指定したcomponentになります。別途componentも作れますが、その場合page内で使用します。画面の一部を部品化(component化)して複数pageで使い回すことも可能です。(directiveも可)

DI後は再起動

Angular-cliをではng serveコマンドで開発します。Ionicの場合はionic serveになります。ソースを変更した場合は、自動的に再描画してくれる仕様は同じですが、DI後はうまく読み込めまい状態になることが多かったです。その場合はionic serveを停止し再度起動する必要があります。

たまにbuildしてみる

ionic serveではエラーなく動いていても、build(ionic-app-scripts build)をすると正常にコンパイル出来ずにエラーが発生する事象がでてきました。原因はDIを間違って複数個同一宣言したのが原因でしたが、たまにbuildした方が良いでしょう。gitを使っている場合はcommitやpushする前がいいかもしれませんね。

ブラウザback問題

Ionicと言うよりSPA全体で言えることですが、SSRをしない仕様の場合、ブラウザバックは敵です。私は用途毎にhistoryを操作してurlを変更しています。

こんな感じ

とりあえずこの一冊は読んどいて損はない

「Ionicで作る モバイルアプリ制作入門」は買って損はないと思います。公式documentは各componentやnative系がメインでquick startのようなものは無いので。

本書はMacで操作すること前提ですがwindowsでも全く問題はありませんでした。記載されているソースも差分表示のように記述されているため、すごく見やすかったです。Angularの知識がない場合はAngularの入門書を先に読むことをお勧めします。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

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

フォローする

スポンサーリンク
レタリング(大)広告