差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- ionic4での変更点 [2018/08/04]
adash333 [Ionic3からIonic4への変更点]
+++ ionic4での変更点 [2018/10/07] (現在)
@@ ライン 2: / ライン 2: @@
 VersionUpは非常に面倒ですが、なるべくキャッチアップしていきたいと思います。
+===== Ionic4公式ドキュメント =====
+https://beta.ionicframework.com/docs/
+年7月にIonic 4 betaが公開されました。まだ正式版ではないので、様子見がよいと思いますが、随時、上記公式ドキュメントが更新されていくと思われます。
+===== ionicアプリ作成コマンド"ionic start" =====
+ionic4では、コマンドブロンプトで以下のコマンドを入力して、ionic4アプリを作成します（アプリの名前を''myApp''とする場合）。
+<code>
+ionic start myApp blank --type=angular
+</code>
+http://twosquirrel.mints.ne.jp/?p=26519
 ===== フォルダ構造とファイル名が変更 =====
@@ ライン 7: / ライン 24: @@
 pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成
-例えば、<code>ionic g page contact</code>とすると、
+例えば、<code>ionic g page contact</code>とすると、src/app/ フォルダの中に、contact/ フォルダが作成されます。さらに、contact/ フォルダの中に、以下の5個のファイルが作成されます。
+<code>
+contact.module.ts
+contact.page.html
+contact.page.scss
+contact.page.spec.ts
+contact.page.ts
+</code>
+http://twosquirrel.mints.ne.jp/?p=26519
 参考:https://beta.ionicframework.com/docs/cli/generate
@@ ライン 23: / ライン 50: @@
 https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/\\
 {{:pasted:20180615-075901.png}}
+routingを試してみたので、以下に記載してみました。
+http://twosquirrel.mints.ne.jp/?p=26533
+http://twosquirrel.mints.ne.jp/?p=26825
 ===== slot =====
+Ionic4では、<wrap em><ion-buttons slot="end"></wrap>のように、ボタンなどの配置を設定します。
+以下のサイトが分かりやすいです。(英語)
+https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/
+上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用いる。)
+<code html>
+<ion-toolbar color="primary">
+  <ion-title>
+    The Title
+  </ion-title>
+  <ion-buttons slot="end">
+    <ion-button (click)="addTodo()">
+      <ion-icon slot="icon-only" name="add-circle"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+</code>
+ionic3
+<code>
+<ion-item>
+ <ion-input type="password" placeholder="Password"></ion-input>
+ <button clear item-right>Forgot</button>
+</ion-item>
+</code>
+ionic4
+<code>
+<ion-item>
+  <ion-input type="password" placeholder="Password"></ion-input>
+  <ion-buttons slot="end">
+    <ion-button>Forget</ion-button>
+  </ion-buttons>
+</ion-item>
+</code>
 ===== ion-navbarがion-toolbarに変更 =====
+上記のコードを参考にしてください。
+===== RxJS5からRxJS6に変更 =====
+非同期通信のためのRxJSですが、大幅変更が行われています。
+[[RxJS6(Ionic4-Angular6)での変更点]]
+===== PWA化が面倒に =====
+ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、コマンドブロンプトで、@angular/pwaをインストールする必要があります。
+しかし、2018/8/1現在、うまくいきません。[[https://github.com/angular/angular-cli/issues/11640|参考外部リンク]]
+http://twosquirrel.mints.ne.jp/?p=26777
+https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/
 ===== リンク =====
 https://www.joshmorony.com/what-to-expect-when-ionic-4-is-released/\\
@@ ライン 37: / ライン 128: @@
 年7月に、Ionic 4.0.0-beta.0がリリースされました。まだ、beta版なので、様子見でよいと思います。
+https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4
+https://github.com/ionicthemes/ionic-4-custom-components
 ===== Ionic3でお勧めの本 =====

サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

差分

ページ用ツール