差分

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

--- ionic4での変更点 [2018/02/10]
adash333 作成
+++ 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
+===== フォルダ構造とファイル名が変更 =====
+pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成
+例えば、<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
 ===== <button ion-button>から<ion-button>へ =====
@@ ライン 10: / ライン 46: @@
 </code>
+===== routingが大幅変更 =====
+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/\\
+年5月時点（Ionic公式ではVersion4は未発表）でのIonic4での変更点の予想が分かりやすく記載されています（英語）。
+https://blog.ionicframework.com/announcing-ionic-4-beta/
+年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でお勧めの本 =====
 以下のサイトが非常に分かりやすいです。
 https://github.com/Ionic-jp/handbook
+Ionic3入門の本は、以下がお勧めです。
+<html>
+<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=twosquirrel-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B0792PKGZ1&linkId=f3c953f6aa35b7734e5fc9a1bb7ffebf"></iframe>
+</html>

サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

差分

ページ用ツール