ionic start projName templateName (templateName:blank,sidemenu,tabs,......)
ionic generate <type> <name> (type:page,component,directive,service,......)
ionic generate page contact (ionic's page 類似 angular's component)
ionic generate page contact --dry-run (純測試 ^.^)
ionic generate page relativePath/contact --dry-run (純測試 ^.^)
ionic generate service services/bob-tours

ionic serve


在 app.component.html 先把 menu 建立好，可參考下列程式碼
<ion-app>
  <ion-split-pane contentId="main-content">

    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>My App</ion-list-header>
          <ion-note>just note</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

      </ion-content>
    </ion-menu>

    <ion-router-outlet id="main-content"></ion-router-outlet>

  </ion-split-pane>
</ion-app>

在需要的分頁當中，用 ion-menu-button 來把 menu 引進來，請參考下面程式碼 favorites.page.html
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
Favorites
</ion-content>

加一顆按鈕，去瀏覽 details，請看下一行
<ion-button href="/details">Show details</ion-button>

或是使用 routerLink 屬性來連
<ion-button routerLink="/details" routerDirection="forward">Show details</ion-button>

加一顆按鈕，呼叫函數
<ion-button expand="block" (click)="func01()">RunFunc01</ion-button>

在最上頭加入退回鍵
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>這是標題</ion-title>
  </ion-toolbar>
</ion-header>

要抓取網址列的參數，請用 ActivatedRoute 合併使用 snapshot ，請參考下面程式碼
【route】
  {
    path: 'details',
    loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule)
  },

【template】
[routerLink]="['/details',tour]" // 這邊的 tour 是一個物件喔

(  也可以臨時搭建一個物件，如 [routerLink]="['/list',{ Category:'Mask', Name:'BigMask', Color:'Green' }]"  )

【component】
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  
  tour=null;

  constructor(private activatedRoute:ActivatedRoute) { }

  ngOnInit() {
    console.log(this.activatedRoute);
    this.tour=this.activatedRoute.snapshot.params;
    console.log(this.tour);
  }

}

要抓取網址列的參數，另外一種方法是先宣告參數，然後取得
【route】
{ path:'GitHub/user/:login/:score',
  component:GitHubUserComponent,
  canActivate:[AuthGuard]},

【template】
<a [routerLink]="['user',user.login,user.score]">user-001</a>

【component】
constructor(private _route:ActivatedRoute) {}
    
ngOnInit()
{
  // 第一種寫法
  let subscription=this._route.params.subscribe
  (
    params=>
    {
      this.login=params["login"];
      this.score=params["score"];
    }
  );

  // 第二種寫法
  this.login=this._route.snapshot.paramMap.get('login');
  this.score=this._route.snapshot.paramMap.get('score');

}

安裝 Augury 外掛(Chrome, Firefox 可用)，可點選 Router Tree 看樹狀圖

若有用到 httpclient 請記得到 module 當中，加入下面的程式碼
import { HttpClientModule } from '@angular/common/http';
@NgModule({ imports: [ HttpClientModule, ] ......})

若有要用到 projection 的話，請注意不是單引號，而是特殊的符號喔。
let requestUrl=`${this.baseUrl}/Regions.json`;

若要讓一個 service 只在 app 載入時讀取 http get 一次的話，請參考下述方法
service 物件多一個函數 initialize() { 初始化的程式碼...... }
在 app.component.ts 裡面， import 並且依賴注入那個 service，
最後在 initializeApp 的函數中，呼叫這個 service 的 initialize() 函數

*ngFor參考
<ion-list>
  <ion-item *ngFor="let tourtype of tourtypes; let i=index"> <!-- 在 ngFor 中，index 從 0 開始 -->
    {{tourtype.Name}}
  </ion-item>
</ion-list>

若要對陣列做各種動作，可參考下面程式。(lodash 好像有速度慢的報告喔)
import _lodash from 'lodash';

// select * from objArray1 order by propertyNameOfAnObject1 asc, propertyNameOfAnObject2 asc, ...... 似乎只能遞增排序！
this.objarray1=_lodash.sortBy( objArray1, ['propertyNameOfAnObject1','propertyNameOfAnObject2',......] ); 

// select * from objArray1 where propertyNameOfAnObject1=wantedValue
this.tours    =_lodash.filter( objArray1, ['propertyNameOfAnObject1', 'wantedValue'] ); // 回傳一個陣列

// select top 1 * from objArray1 where propertyNameOfAnObject1=wantedValue
this.tour     =_lodash.find( objArray1, ['propertyNameOfAnObject1', 'wantedValue'] ); // 回傳一個元素

當你不肯定變數是否有資料或是undefined時，可以用問號來敘述，請參考下面程式碼
<ion-item *ngIf="favService.favTours?.length==0">
  You didn't choose any favorites yet!
</ion-item>

讀取變數與儲存變數
this.favIDs=JSON.parse(window.localStorage.getItem('FavoritesIDs'));
window.localStorage.setItem('FavoritesIDs',JSON.stringify(this.favIDs));

儲存議題 Data Storage

  在 native app 模式下，Storage 傾向使用 SQLite
  在 web 或 Progressive Web App 模式下，Storage 會依序決定採用 IndexedDB, WebSQL, 或是 localstorage

在專案的資料夾底下，
先安裝 ionic cordova plugin add cordova-sqlite-storage
再安裝套件 npm install --save @ionic/storage

之後可以 import { IonicStorageModule } from '@ionic/storage';
並且在 @NgModule({ imports:[ IonicStorageModule.forRoot(), ...... ] });

來到 service 的程式底下，依序為
import { Storage } from '@ionic/storage';
constructor(private _storage:Storage) { }

確認準備就緒後，再讀取資料
    this._storage.ready().then
    (
      ()=>
      {
        this._storage.get('key').then
        (
          value=>{ this.var1=value; }
        )
      }
    );

接下來是寫入資料
this._storage.set('key',this.var1);