Ionic Tutorial

Lesson 2: Ionic/Angular 基本語法

Revised on 2023/2/21

Ionic v6.20.6

@Ionic/CLI 6.20.8

Angular v15.0.0

Ionic基本語法

範例說明
單一頁面結構: TS檔與HTML檔
屬性與屬性繫結
事件繫結
Ionic元件介紹: ion-list, ion-card
應用範例：清單-細節頁面設計架構

範例說明

範例說明
單一頁面結構: TS檔與HTML檔
屬性與屬性繫結
事件繫結
Ionic元件介紹: ion-list, ion-card
應用範例：清單-細節頁面設計架構

範例修改說明(1/3)

ionic start myApp tabs

export class Tab1Page {
  // 屬性(Property): 教學單位陣列
  units = [
    '人文學院',
    '觀光休閒與運動學院',
    '管理學院',
    '財經學院',
    '資訊與商業智慧學院',
    '通識教育中心',
    '體育教育中心'
  ];
  constructor() {}
}

❶ 建立Tabs版型App

❷ 修改tab1.page.ts

加入屬性units

export class Tab1Page {
  // 屬性(Property): 教學單位陣列
  .... 略 ...

  // 方法(Method): 選取項目
  unitSelected(unit: string) {
    console.log('被選項目為:', unit);
  }

}

加入方法

範例修改說明(2/3)

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">真理大學
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let unit of units" (click)="unitSelected(unit)">
      {{ unit }}
    </ion-item>
  </ion-list>
</ion-content>

❸ 修改tab1.page.html

使用屬性units

呼叫方法 unitSelected()

建立清單(list)

第3行 css class：參考官網CSS工具之說明

範例修改說明(3/3)

❹ 模擬執行結果

cd myApp
ionic serve --lab

建立屬性units / 使用屬性
建立方法unitSelected() / 呼叫方法
套用清單(list) 格式 / 有哪些頁面格式可用?
小圖示：https://ionic.io/ionicons

頁面結構

範例說明
單一頁面結構: TS檔與HTML檔
屬性與屬性繫結
事件繫結
Ionic元件介紹: ion-list, ion-card
應用範例：清單-細節頁面設計架構

頁面結構ts檔結構(1/4)

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  // 屬性(Property): 教學單位陣列
  units = [
    '人文學院',
    '觀光休閒與運動學院',
    '管理學院',
    '財經學院',
    '資訊與商業智慧學院',
    '通識教育中心',
    '體育教育中心'
  ];

  // 方法(Method): 選取項目
  unitSelected(unit: string) {
    console.log('被選項目為:', unit);
  }

  constructor() {}
}

tab1.page.ts

1. 使用其他模組的功能必須import

2. export: 代表Tab1Page可供別的ts檔import

3. @Component: 類別註釋(decorator)

內有屬性可於他處使用
selector, templateUrl為常用屬性

4. 屬性：例如units

可用於本ts檔內，或對應之html檔內

5. 方法：例如unitSelected()

可於本ts檔內呼叫，或於對應之html檔內呼叫

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">真理大學
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let unit of units" (click)="unitSelected(unit)">
      {{ unit }}
    </ion-item>
  </ion-list>
</ion-content>

tab1.page.html

ion-header

ion-content

ion-toolbar

ion-title

ion-list

ion-item

❶ 主要元件：

ion-header, ion-content

❷ *ngFor：Angular for迴圈

「雙向繫結」取得對應ts檔的units陣列

let 迴圈變數 of 陣列變數

❸(click)：click事件處理

「事件繫結」呼叫對應ts檔的method

❹ {{ 屬性 }}：嵌入屬性值

頁面結構html檔結構(2/4)

頁面結構html檔結構(3/4)

<ion-header>
  <ion-toolbar>
    <ion-title>
      標題在此
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  內容在此
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>
      頁尾在此
    </ion-title>
  </ion-toolbar>
</ion-footer>

Ionic三個主要root components

ion-header

ion-content

ion-footer

內可含ion-toolbar

透過各種ionic版面元件組成頁面

線上文件：https://ionicframework.com/docs/components/

內可含ion-toolbar，較少使用

頁面結構html檔結構(4/4)

<ion-header>
  <ion-toolbar>
    <ion-title>
      標題在此
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  內容在此
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>
      頁尾在此
    </ion-title>
  </ion-toolbar>
</ion-footer>

修改tab2.page.html

資料繫結、屬性繫結

data binding, property binding

範例說明
單一頁面結構: TS檔與HTML檔
屬性與屬性繫結
事件繫結
Ionic元件介紹: ion-list, ion-card
應用範例：清單-細節頁面設計架構

屬性property

屬性：暫存資料, 供頁面使用
☛ 3類:一般數值、物件、陣列
如何運作?
☛ 屬性繫結 (property binding)

一般數值(字串)

陣列(字串)

物件(圖案、字串)

屬性基本用法: 內插(1/14)

... 略
export class Tab1Page {
  // 屬性(Property): 教學單位陣列
  title: string = '真理大學'
  units = [
  .... 略 ...
}

title = '真理大學'    // 定義於ts檔

屬性名稱

初值

<ion-title>        <!-- 使用於html檔 -->
    {{ title }}
</ion-title>

屬性內插

{{ 屬性名稱 }} 使用於.html檔

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">{{ title }}
    </ion-title>
  </ion-toolbar>
</ion-header>

...略...

屬性

繫結

tab1.page.ts

tab1.page.html

屬性屬性繫結(property binding)(2/14)

https://hahoangv.files.wordpress.com/2016/05/databinding_3.png?w=616

tab1.page.ts

tab1.page.html

屬性繫結

資料流

屬性

繫結

屬性字串、數值(3/14)

  title = '關於我';
  author = 'Leo Wang';
  fileName = 'logo.png';
  lucky = 7;
  motto = '要怎麼收穫 先那麼栽';

數值型別: number

字串型別: string

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  title = '關於我';
  author = 'Leo Wang';
  fileName = 'logo.png';
  lucky = 7;
  motto = '要怎麼收穫 先那麼栽';
}

將屬性加入tab3.page.ts

屬性

繫結

屬性字串、數值(4/14)

<ion-header>
  <ion-toolbar>
    <ion-title>
      {{ title }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-img [src]="'/assets/images/' + fileName"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>
      </ion-card-subtitle>
      <ion-card-title>{{ author }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>座右銘：{{ motto }}</p>
      <p>幸運號碼：{{ lucky }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

在tab3.html.ts使用所有屬性

版面: ion-card

ion-card文件在此

在assets下建立images
放入圖檔

屬性

繫結

屬性基本用法:屬性繫結與內插(5/14)

<p>座右銘：{{ motto }}</p>

<ion-img [src]="'/assets/images/' + fileName"></ion-img>

為什麼fileName屬性不能加「兩對大括弧」？

屬性繫結: 直接打名稱

內插: 要外加兩對大括弧

使用時機: 位於「開始標籤」內(通常出現在等號右側)

使用時機: 位於html內容處（開始、結束標籤之間）

屬性

繫結

  title = '關於我';
  author = 'Leo Wang';
  fileName = 'logo.png';
  lucky = 7;
  motto = '要怎麼收穫 先那麼栽';

屬性字串、數值(6/14)

...
<ion-content>
  <ion-card>
    <ion-img [src]="'/assets/images/' + fileName"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>
      </ion-card-subtitle>
      <ion-card-title>{{ author }}</ion-card-title>
    </ion-card-header>
...

如何記住這麼複雜的標籤名稱?

安裝延伸模組: Ionic Snippets

屬性

繫結

屬性字串、數值(7/14)

指令: i-XXX

屬性

繫結

練習2-1-1

在tab3頁面建立「關於我」頁面
使用ion-card版面元件
在ts檔建立下列屬性(非照此順序展示)

頭像檔名(string)
我希望的成績(number)
姓名(string)
學號(string)
我想說的一句話(string)

屬性

繫結

屬性物件(8/14)

  title = '關於我';
  author = 'Leo Wang';
  fileName = 'logo.png';
  lucky = 7;
  motto = '要怎麼收穫 先那麼栽';

改寫為「物件」: aboutme, 內有四個欄位

同屬「關於我」的不同欄位

aboutme = {
    name: 'Leo Wang',
    avatar: 'logo.png',
    lucky: 7,
    motto: '要怎麼收穫 先那麼栽'
};

aboutme = {
    name: 'Leo Wang',
    avatar: 'logo.png',
    lucky: 7,
    motto: '要怎麼收穫 先那麼栽'
};

物件名稱

欄位名稱

欄位初值

物件初值: 以{}包起來

欄位之間: 以逗點分隔

欄位名稱: 欄位初值,

屬性

繫結

屬性物件(9/14)

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  title = '關於我';
  aboutme = {
    name: 'Leo Wang',
    avatar: 'logo.png',
    lucky: 7,
    motto: '要怎麼收穫 先那麼栽'
  };
}

將物件屬性取代原先屬性tab3.page.ts

屬性

繫結

屬性物件(10/14)

...略...
<ion-content>
  <ion-card>
    <ion-img [src]="'/assets/images/' + aboutme.avatar"></ion-img>
    <ion-card-header>
      <ion-card-subtitle>
      </ion-card-subtitle>
      <ion-card-title>{{ aboutme.name }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>座右銘：{{ aboutme.motto }}</p>
      <p>幸運號碼：{{ aboutme.lucky }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

改寫tab3.page.html

物件名稱.欄位名稱

屬性

繫結

練習2-1-2

將「關於我」頁面改為使用物件

  // 物件 aboutme: 4個欄位
  aboutme = {
    name: 'Leo Wang',
    avatar: 'logo.png',
    lucky: 7,
    motto: '要怎麼收穫 先那麼栽'
  };

屬性

繫結

屬性屬性繫結其他用法(11/14)

<detail-page [cid]="currentId"></detail-page>

<button [disabled]="isUnchanged">
  送出
</button>

@Component({
  selector: 'detail-page',
  ...
})
export class DetailPage {
  @Input('cid') cid: number;
  ...
}

detail.page.ts

[屬性]使用時機❶：繫結DOM屬性

用途：傳遞參數到下一頁

home.page.ts

detail.page.ts

cid值

home.page.html

<ion-img [src]="'/assets/images/' + aboutme.avatar"></ion-img>

使用方括弧：[屬性名稱]

DOM屬性

用途: 將DOM屬性設定為等號右側數值

[屬性]使用時機❷：繫結@input()屬性

屬性

繫結

什麼是DOM屬性?(12/14)

DOM(Document Object Model) :相對於HTML頁面裡的各元素，瀏覽器所建立之對應物件

DOM裡各元素之物件，都有屬性與方法可供使用

DOM屬性

屬性

繫結

屬性陣列(13/14)

  courses = [
    {name: '手機程式設計', credit: 3, subject: '選修', desc: '行動app開發課程' },
    {name: '行動技術與應用', credit: 3, subject: '選修', desc: '科技最新發展趨勢介紹與體驗' },
    {name: '基礎程式設計', credit: 3, subject: '必修', desc: 'python程式語言介紹' }
  ];

陣列：相同類型的「物件」或數值

陣列名稱

3個元素,都是物件

陣列初值: 以[]包起來

元素之間: 以逗點分隔

屬性

繫結

屬性陣列(14/14)

  <ion-list>
    <ion-item *ngFor='let item of courses'>
      <ion-label>{{ item.name }}</ion-label>
      <p> {{ item.desc }}</p>
      <p> 學分數:{{ item.credit }}, 必選修: {{ item.subject }}</p>
    </ion-item>
  </ion-list>

使用方式: 迴圈指令 *ngFor

迴圈變數

迴圈內: 使用迴圈變數

陣列變數,來自ts檔

*ngFor='let 迴圈自訂變數 of 陣列變數"

*ngFor='let item of courses"

*ngFor用於要重複出現的標籤

屬性

繫結

練習2-1-3

在tab2加入陣列，紀錄你想要販售的商品
商品4個欄位：名稱，價格，說明, 圖片
使用ion-list版面元件

  // 物件陣列 products: 4個欄位 名稱，價格，說明, 圖片
  products = [
    {name: '蜂蜜檸檬水', price: 100, desc: '不加一滴水熬煮，風味純正', img: 'honey.png'},
    {name: '美式咖啡', price: 80, desc: '口感明亮滑順，回甘不苦澀', img: 'coffee.png'}
  ];

屬性

繫結

事件繫結Event Binding

事件

軟體執行過程中發出的訊號
例如: 滑鼠點選, 手指滑動, 鬧鐘, 資料庫新增資料
分類: ❶ng事件 ❷DOM事件 ❸自訂事件
Ionic App處理事件的方式: 事件繫結

Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Yannick from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

事件繫結 event binding(1/4)

https://hahoangv.files.wordpress.com/2016/05/databinding_3.png?w=616

tab1.page.ts

tab1.page.html

屬性繫結

資料流

事件流

事件繫結

事件產生

回呼函式

呼叫

事件繫結

事件繫結 event binding(2/4)

...
export class AppComponent {
  myEvent(event) {
    console.log(event);
  }
}

<button (click)="myEvent($event)">
     閱讀更多
</button>

❶ html端語法寫在開始標籤內

(DOM事件)="事件處理器(參數)"

xxx.page.html

xxx.page.ts

雙引號內為ts檔定義的事件處理器(回呼函式)

$event為發生的事件內容

(ng事件)

ng事件: Angular定義之事件

(自訂事件)

任何ts檔內都可以自訂事件

❷ ts端: 建立事件處理器 export class ...{ }大括弧內

函式名稱(參數: 參數型別) {}

(DOM事件)

事件處理器(回呼函式)

❸ 除了DOM事件外, 括弧內可以是...

事件處理器(回呼函式)

事件繫結

什麼是DOM事件？(3/4)

JavaScript程式可針對任一HTML元素所屬的DOM事件，註冊事件處理器

https://www.w3schools.com/jsref/dom_obj_event.asp

除了click外, Ionic App較少使用DOM事件

因為Ionic大多使用ion開頭的「自訂事件」

事件繫結

事件繫結呼叫事件處理器(4/4)

<ion-button (click)="doSomething($event)">送出</ion-button>

<ion指令 (click)="函式名稱()"></ion指令>

<ion指令 (click)="函式名稱(參數1,參數2,...)"></ion指令> <!--1個以上參數-->
<ion指令 (click)="函式名稱($event)"></ion指令> <!--$event是系統提供的事件內容-->

HTML檔內事件繫結以click事件為例

範例: click事件繫結函式doSomething()

其他用法

需在ts檔撰寫事件處理器(回呼函式)

export class Tab2Page {
  doSomething(e) {  // e: ts檔內參數名稱
    // e的值由HTML檔傳入, 即e = $event
  }
}

事件繫結

練習2-1-4

使用console.log()在控制台印出$event

export class Tab2Page {
  doSomething(e) {  // e: ts檔內參數名稱
    console.log('事件:', e);
  }
}

console.log('自訂內容');  // 印出括弧內的字串

err = '找不到網頁';    
console.log(err);    // err為先前定義的變數

// 一個以上的訊息組合，以逗點相隔。(resp為已定義之變數)
console.log('回應內容:', resp);

事件繫結

<ion-button (click)="doSomething($event)">送出</ion-button>

tab2.page.html

tab2.page.ts

點選時傳入

UI元件介紹List

ion-icon: 小圖示
ion-avatar: 小頭像(圓形)
ion-thumbnail: 縮圖(四方形)
ion-text: 文字

ion-list基本格式搭配ion-icon(1/3)

<ion-list>
  <ion-item *ngFor= 'let item of courses'>
      <ion-label>
        <h3>標題在此</h3>
        <ion-text>
          <p>內文在此</p>
        </ion-text>
      </ion-label>
      
      <ion-icon slot="start" [name]="item.icon"></ion-icon>
    </ion-item>
</ion-list>

courses = [
    {name: '手機程式設計', credit: 3, subject: '選修', desc: '行動app開發課程', icon: 'analytics' },
    {name: '行動技術與應用', credit: 3, subject: '選修', desc: '科技最新發展', icon: 'basketball' },
    {name: '基礎程式設計', credit: 3, subject: '必修', desc: 'python程式語言介紹', icon: 'beer' }
];

xxx.page.ts

xxx.page.html

陣列名稱

迴圈變數

圖示

圖示出現的位置

圖示名稱參考icoicon網站

介面元件

ion-list綜合練習(2/3)

ion-icon

ion-text

ion-avatar

ion-thumbnail

https://ionicframework.com/docs/api/avatar

https://ionicframework.com/docs/api/thumbnail

介面元件

ion-list綜合練習(3/3)

ion-thumbnail

courses = [
    {name: '手機程式設計', img: '69.jpg', credit: 3, subject: '選修', desc: '行動app開發課程', icon: 'analytics' },
    {name: '行動技術與應用', img: '70.jpg', credit: 3, subject: '選修', desc: '科技最新發展趨勢介紹與體驗', icon: 'basketball' },
    {name: '基礎程式設計', img: '80.jpg', credit: 3, subject: '必修', desc: 'python程式語言介紹', icon: 'beer' }
  ];

xxx.page.ts

<ion-list>
  <ion-item *ngFor='let subject of courses'>
    <ion-label>
      <h3>{{ subject.name }}</h3>
      <ion-text>
        <p>{{ subject.desc}}</p>
      </ion-text>
    </ion-label>
    <ion-thumbnail slot="start">
      <img src="/assets/images/{{ subject.img }}">
    </ion-thumbnail>      
  </ion-item>
</ion-list>

xxx.page.html

介面元件

練習2-2 ion-list

分別使用ion-icon, ion-avatar, ion-thumbnail製作頁面

介面元件

參考文件說明：https://ionicframework.com/docs/api/avatar

<ion-item>
  <ion-avatar slot="start">
    <img src="/assets/images/me.png">
  </ion-avatar>
  <ion-label>項目頭像</ion-label>
</ion-item>

練習2-2摘要

ionic start ListExample tabs
cd ListExample

1. 建立專案

2. 修改tab1.page.ts, 加入課程物件陣列courses

courses = [
    {name: '手機程式設計', img: '69.jpg', credit: 3, subject: '選修', desc: '行動app開發課程', icon: 'analytics' },
    {name: '行動技術與應用', img: '70.jpg', credit: 3, subject: '選修', desc: '科技最新發展趨勢介紹與體驗', icon: 'basketball' },
    {name: '基礎程式設計', img: '80.jpg', credit: 3, subject: '必修', desc: 'python程式語言介紹', icon: 'beer' }
  ];

3. 修改tab1.page.html, 以ion-icon顯示項目內容

...
    <ion-item *ngFor="let item of courses">
      <ion-label>
        <h2>{{ item.name }}</h2>
        <ion-text><p>{{ item.desc }}</p></ion-text>
      </ion-label>
      <ion-icon [name]="item.icon" slot="start"></ion-icon>
    </ion-item>

練習2-2摘要

4. 修改tab2.page.ts, 加入課程物件陣列courses

courses = [
    {name: '手機程式設計', img: '69.jpg', credit: 3, subject: '選修', desc: '行動app開發課程', icon: 'analytics' },
    {name: '行動技術與應用', img: '70.jpg', credit: 3, subject: '選修', desc: '科技最新發展趨勢介紹與體驗', icon: 'basketball' },
    {name: '基礎程式設計', img: '80.jpg', credit: 3, subject: '必修', desc: 'python程式語言介紹', icon: 'beer' }
  ];

5. 修改tab2.page.html, 以ion-avatar顯示項目內容

...
<ion-content>
  <ion-list>
    <ion-item *ngFor="let cc of courses">
      <ion-avatar slot="start">
        <img [src]="'/assets/images/' + cc.img" />
      </ion-avatar>
      <ion-label>{{ cc.name }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

準備工作：先將圖檔放入

/assets/images資料夾

練習2-2摘要

6. 修改tab3.page.ts, 加入課程物件陣列courses

courses = [
    {name: '手機程式設計', img: '69.jpg', credit: 3, subject: '選修', desc: '行動app開發課程', icon: 'analytics' },
    {name: '行動技術與應用', img: '70.jpg', credit: 3, subject: '選修', desc: '科技最新發展趨勢介紹與體驗', icon: 'basketball' },
    {name: '基礎程式設計', img: '80.jpg', credit: 3, subject: '必修', desc: 'python程式語言介紹', icon: 'beer' }
  ];

7. 修改tab3.page.html, 以ion-thumbnail顯示項目內容

...
    <ion-item *ngFor='let subject of courses'>
      <ion-label>
        <h3>{{ subject.name }}</h3>
        <ion-text>
          <p>{{ subject.desc}}</p>
        </ion-text>
      </ion-label>
      <ion-thumbnail slot="start">
        <img src="/assets/images/{{ subject.img }}">
      </ion-thumbnail>      
    </ion-item>

準備工作：先將圖檔放入

/assets/images資料夾

元件介紹Card

指令: ion-card
用途: 內容介紹頁面

卡片元件介紹: https://ionicframework.com/docs/api/card

介面元件

ion-card練習範例(1/3)

ionic start TravelApp blank

scene = {
  title: '幾米主題南港站',
  avatar: 'avatar.jpg',
  desc: '受到各方廣大喜愛的幾米主題裝置藝術，就藏身在捷運板南線的南港站之中。南港捷運站大膽引進享譽國際的幾米繪畫，完整表現出捷運站的現代性，既寫實又富美感，也是捷運南港站啟用最受人矚目的話題。',
  img: 'g_me.jpg'
};

❶建立blank 版型App

blank版型: home頁面

tabs版型: 3個頁面 + 主頁tabs

❷ 加入scene物件 (home.page.ts) 複製圖片至assets/img下

介面元件

ion-card練習範例(2/3)

❸ 使用ion-card指令 (home.page.html)

註: 需安裝Ionic Snippets擴充模組功能(VS Code)

輸入i-ca 向下選取i-card-full

自動生成之程式碼

介面元件

ion-card練習範例(3/3)

❸ 使用ion-card指令 (home.page.html)

<ion-card>
  <ion-card-header>
    <ion-img [src]="'/assets/img/' + scene.img"></ion-img>
    <ion-card-subtitle>景點名稱</ion-card-subtitle>
    <ion-item>
        <ion-card-title>{{ scene.title }}</ion-card-title>
        <ion-avatar slot="start">
          <img [src]="'/assets/img/' + scene.avatar ">
        </ion-avatar>
    </ion-item>
  </ion-card-header>
  <ion-card-content>
    {{ scene.desc }}
  </ion-card-content>
</ion-card>

介面元件

卡片元件介紹: https://ionicframework.com/docs/api/card

Ionic App範例架構

清單-細節架構

清單頁面

細節頁面

需求1：網址+傳遞參數

需求2：返回按鈕

新增頁面與Routing

ionic g page 頁面名稱

新增頁面與Routing練習

ionic start navApp blank

新建專案

cd navApp
ionic g page newpage

新建一個page

檢視app-routing.module.ts（定義路徑）

切換頁面的方式: 指定網址

http://localhost:8200/home

http://localhost:8200/newpage

首頁

新增頁面與Routing使用路徑

情境A: 使用路徑的方式(在html檔內)

<ion-button href='/newpage'>前往下一頁</ion-button>

方法 ❶ 設定href (html超連結)

<a [routerLink]="['/newpage']">超連結</a>
<ion-button [routerLink]="['/newpage']">
  前往下一頁
</ion-button>

方法 ❷ 設定routerLink (屬性繫結)

注意: 值為字串陣列

新增頁面與Routing範例

情境B: 使用路徑的方式(在ts檔內)

<ion-button (click)="go()">點我</ion-button>

❶ import router

import { Component } from '@angular/core';
import { Router } from '@angular/router';
...
export class HomePage {
  constructor(private router: Router) {}

  go() {
    this.router.navigateByUrl('/animals');
  }
}

❷ 呼叫navigateByUrl()

Ⓐ import Router

Ⓑ在建構子內建立引數

Ⓓ事件繫結

ts檔

HTML檔

新增頁面與Routing範例

home

newpage

按鈕說明文件: https://ionicframework.com/docs/api/button

完成兩頁App

頁面間傳遞資料

2330

傳到下一頁

正確顯示細節

3045

內容應改為3045

頁面間傳遞參數

http://localhost:8200/detail/123

假設新增頁面detail

ionic g page detail

則傳遞方式有2種：

http://localhost:8200/detail; id=123

❶ 使用網址路徑

想將參數對 {id: 123} 傳送到detail頁面

❷ 不改網址, 直接傳參數

Ⓐ 需修改app-routing.module.ts

Ⓑ 頁面以[routerLink]指定網址、參數

處理方式:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' },
];

將'detail'改成'detail/:id

Ⓐ app-routing.module.ts 不修改

Ⓑ TS檔呼叫navigate(), 指定網址、參數

處理方式:

import { Router } from '@angular/router';
  ....略....
  constructor(private router: Router) {}
  detail(stockid) {
    this.router.navigate(['detail', {id: stockid}]);
  }
}

使用navigate()

網址

參數對

TS檔

建議使用!!

傳遞參數範例陣列資料(1/10)

陣列資料: 七筆資料，每一筆7個欄位

  lists = [
    {id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
        yield: 3.06, Desc: '晶圓製造'},
    {id: 1301, name: '台塑', price: 76.5, PER: 27.03, PBR: 1.7,
        yield: 2.22, Desc: '聚氯乙烯(PVC)、氯乙烯等塑膠製品'},
    {id: 2002, name: '中鋼', price: 25.8, PER: 18.04, PBR: 1.33,
        yield: 3.88, Desc: '鋼品設計製造買賣儲運及其他相關業務'},
    {id: 3045, name: '台灣大', price: 108.0, PER: 19.42, PBR: 6.13,
        yield: 5.19, Desc: '通訊業'},
    {id: 2454, name: '聯發科', price: 421.5, PER: 14.03, PBR: 2.68,
        yield: 3.56, Desc: '多媒體IC 、電腦週邊IC、其他IC'},
    {id: 2317, name: '鴻海', price: 93.1, PER: 10.52, PBR: 1.48,
        yield: 1.93, Desc: '電腦系統設備連接器等之開發設計製造'},
    {id: 3008, name: '大立光', price: 2695.0, PER: 18.6, PBR: 7.83,
        yield: 1.06, Desc: '各式光學鏡頭模組研發設計生產銷售'}
  ];

傳遞參數範例清單/細節瀏覽(2/10)

ionic start StockApp blank

❶建立StockApp

cd StockApp
ionic g page detail

❷新增細節頁面

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' },
];

Ⓐ 手動修改app-routing.module.ts(不建議)

將'detail'改成'detail/:id

id 便是傳遞的參數名稱

http://localhost:8200/detail/123

參數 id='123'

❸之方法❶: 使用網址路徑

傳遞參數範例撰寫Home.Page元件(3/10)

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of lists" [routerLink]="['/detail/item.id',{id: item.id}]">
      {{ item.id }} {{ item.name }}
    </ion-item>
  </ion-list>
</ion-content>

home.page.html

使用[routerLink]

Ⓑ 以[routerLink]設定網址、參數

陣列元素1: 完整網址

陣列元素2: 設定參數

/detail/123

參數 id='123'

注意: 要加方括弧屬性繫結

❸之方法❶: 使用網址路徑

傳遞參數範例route設定(4/10)

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'detail', loadChildren: './detail/detail.module#DetailPageModule' }
];

Ⓐ app-routing.module.ts 保留原內容不修改

❸之方法❷ 不改網址, 直接傳參數

注意:❸之方法❶或方法❷擇一即可!

傳遞參數範例撰寫Home.Page元件(5/10)

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  ....陣列內容略....

  constructor(private router: Router) {}

  detail(stockid) {
    this.router.navigate(['detail', {id: stockid}]);
  }
}

home.page.ts

❶ 引入Router元件: 內有頁面切換功能

❷ 在建構子宣告Router服務引數

❸ 撰寫頁面切換函式

使用navigate()

網址

參數對

參數名稱

參數值

Ⓑ TS檔呼叫navigate(), 指定網址、參數

❸之方法❷ 不改網址, 直接傳參數

傳遞參數範例撰寫Home.Page元件(6/10)

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  lists = [
    {id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
        yield: 3.06, Desc: '晶圓製造'},
    {id: 1301, name: '台塑', price: 76.5, PER: 27.03, PBR: 1.7,
        yield: 2.22, Desc: '聚氯乙烯(PVC)、氯乙烯等塑膠製品'},
    {id: 2002, name: '中鋼', price: 25.8, PER: 18.04, PBR: 1.33,
        yield: 3.88, Desc: '鋼品設計製造買賣儲運及其他相關業務'},
    {id: 3045, name: '台灣大', price: 108.0, PER: 19.42, PBR: 6.13,
        yield: 5.19, Desc: '通訊業'},
    {id: 2454, name: '聯發科', price: 421.5, PER: 14.03, PBR: 2.68,
        yield: 3.56, Desc: '多媒體IC 、電腦週邊IC、其他IC'},
    {id: 2317, name: '鴻海', price: 93.1, PER: 10.52, PBR: 1.48,
        yield: 1.93, Desc: '電腦系統設備連接器等之開發設計製造'},
    {id: 3008, name: '大立光', price: 2695.0, PER: 18.6, PBR: 7.83,
        yield: 1.06, Desc: '各式光學鏡頭模組研發設計生產銷售'}
  ];

  constructor(private router: Router) {}

  detail(stockid) {
    this.router.navigate(['detail', {id: stockid}]);
  }

}

home.page.ts(完整)

home.page.ts改完後如下:

傳遞參數範例撰寫Home.Page元件(7/10)

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of lists" (click)="detail(item.id)">
          {{ item.id }} {{ item.name }}
        </ion-item>
      </ion-list>
</ion-content>

home.page.html

點選後呼叫detail()

參數值

home.page.html改完後如下:

傳遞參數範例撰寫DetailPage元件(8/10)

  lists = [
    {id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
        yield: 3.06, Desc: '晶圓製造'},
    {id: 1301, name: '台塑', price: 76.5, PER: 27.03, PBR: 1.7,
        yield: 2.22, Desc: '聚氯乙烯(PVC)、氯乙烯等塑膠製品'},
    {id: 2002, name: '中鋼', price: 25.8, PER: 18.04, PBR: 1.33,
        yield: 3.88, Desc: '鋼品設計製造買賣儲運及其他相關業務'},
    {id: 3045, name: '台灣大', price: 108.0, PER: 19.42, PBR: 6.13,
        yield: 5.19, Desc: '通訊業'},
    {id: 2454, name: '聯發科', price: 421.5, PER: 14.03, PBR: 2.68,
        yield: 3.56, Desc: '多媒體IC 、電腦週邊IC、其他IC'},
    {id: 2317, name: '鴻海', price: 93.1, PER: 10.52, PBR: 1.48,
        yield: 1.93, Desc: '電腦系統設備連接器等之開發設計製造'},
    {id: 3008, name: '大立光', price: 2695.0, PER: 18.6, PBR: 7.83,
        yield: 1.06, Desc: '各式光學鏡頭模組研發設計生產銷售'}
  ];

加入陣列資料: 七筆資料，每一筆7個欄位

❹ 撰寫DetailPage內容

修改detail.page.ts

傳遞參數範例撰寫DetailPage元件(9/10)

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

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  id = '';
  data = null;
  ... 陣列內容略 ...

  constructor(private route: ActivatedRoute) { }


  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.data = this.lists.filter(x => x.id.toString() === this.id)[0];
  }
}

修改detail.page.ts

❶ 引入ActivatedRoute元件: 內有讀取網址列參數的功能

❷ 在建構子宣告ActivatedRoute服務引數route

❸ 呼叫snapshot.paramMap.get() 讀取網址列參數

參數名稱

http://localhost:8200/detail/123

參數 id='123'

❹ 從lists陣列中, 根據this.id值取得正確股票資料

❹ 撰寫DetailPage內容

傳遞參數範例關於取得陣列內容(10/10)

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.data = this.lists.filter(x => x.id.toString() === this.id)[0];
  }

使用陣列過濾器 array filter (typescript內建函式)取得陣列內容

https://www.tutorialspoint.com/typescript/typescript_array_filter.htm

for迴圈, x是迴圈變數, 依序代入陣列每一個元素

傳遞參數範例DetailPage完整內容

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

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  lists = [
    {id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
        yield: 3.06, Desc: '晶圓製造'},
    {id: 1301, name: '台塑', price: 76.5, PER: 27.03, PBR: 1.7,
        yield: 2.22, Desc: '聚氯乙烯(PVC)、氯乙烯等塑膠製品'},
    {id: 2002, name: '中鋼', price: 25.8, PER: 18.04, PBR: 1.33,
        yield: 3.88, Desc: '鋼品設計製造買賣儲運及其他相關業務'},
    {id: 3045, name: '台灣大', price: 108.0, PER: 19.42, PBR: 6.13,
        yield: 5.19, Desc: '通訊業'},
    {id: 2454, name: '聯發科', price: 421.5, PER: 14.03, PBR: 2.68,
        yield: 3.56, Desc: '多媒體IC 、電腦週邊IC、其他IC'},
    {id: 2317, name: '鴻海', price: 93.1, PER: 10.52, PBR: 1.48,
        yield: 1.93, Desc: '電腦系統設備連接器等之開發設計製造'},
    {id: 3008, name: '大立光', price: 2695.0, PER: 18.6, PBR: 7.83,
        yield: 1.06, Desc: '各式光學鏡頭模組研發設計生產銷售'}
  ];

  id ;
  data=this.lists[0] ;

  constructor(public route: ActivatedRoute) {
    this.id = this.route.snapshot.paramMap.get('id');
    if(this.id!==undefined) {
      this.data = this.lists.filter(x => x.id.toString() === this.id)[0];
    }
   }

  ngOnInit() {
  }
}

detail.page.ts(完整)

傳遞參數範例DetailPage完整內容

<ion-header>
  <ion-toolbar>
    <ion-title>{{ data.name }}</ion-title>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-item>
      <ion-icon name="wine" slot="start"></ion-icon>
      <h2> {{ data.id }} {{ data.name }}</h2>
      <p>{{ data.Desc }}</p>
    </ion-item>
    <ion-item>
      <ion-grid fixed>
        <ion-row>
          <ion-col size="6">股價: {{ data.price }}</ion-col>
          <ion-col size="6">本益比: {{ data.PER }}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card>
</ion-content>

detail.page.html

返
回
按
鈕

slot="start" 左側 slot="end"右側

網格系統

一行兩列

練習


 places = [
  {id: '1', title: '幾米主題南港站', photoURL: 'g_me.jpg', intro: '受到各方廣大喜愛的幾米主題裝置藝術，就藏身在捷運板南線的南港站之中。南港捷運站大膽引進享譽國際的幾米繪畫，完整表現出捷運站的現代性'},
  {id: '2', title: '140高地公園', photoURL: 'high_land.jpg', intro: '140高地公園位於台北市文山區萬美里境內，萬寧街北側，介於萬寧街與萬美街2段間的丘陵地，最高海拔為138公尺的枹子腳山（枹仔坑山），山頂視野遼闊'},
  {id: '3', title: '通化公園', photoURL: 'th_park.jpg', intro: '本公園位於文昌街與通化街口，於民國76年建立，原命名為「文通公園」，面積1180平方公尺，後改「文通公園」為「通化公園」'},
  {id: '4', title: '世貿公園', photoURL: 'wtc_park.jpg', intro: '為提供市民更多的停車空間，停管處新建南港區世貿公園地下停車場，並於民國100年簡易綠美化，公園面積約1.2公頃，位於南港區經貿二路106巷'},
];

陣列資料如上

新建一個「清單」-「細節」瀏覽App

細節頁面以ion-card呈現

ionic start ExamApp blank
cd ExamApp
ionic g page place

https://ionicframework.com/docs/api/card

專案建置指令

Ionic Tutorial

Ionic基本語法

範例說明

範例修改說明(1/3)

範例修改說明(2/3)

範例修改說明(3/3)

頁面結構

頁面結構ts檔結構(1/4)

頁面結構html檔結構(2/4)

頁面結構html檔結構(3/4)

頁面結構html檔結構(4/4)

資料繫結、屬性繫結

屬性property

屬性 基本用法: 內插(1/14)

屬性屬性繫結(property binding)(2/14)

屬性 字串、數值(3/14)

屬性 字串、數值(4/14)

屬性 基本用法:屬性繫結與內插(5/14)

屬性 字串、數值(6/14)

屬性 字串、數值(7/14)

練習2-1-1

屬性物件(8/14)

屬性物件(9/14)

屬性物件(10/14)

練習2-1-2

屬性 屬性繫結其他用法(11/14)

什麼是DOM屬性?(12/14)

屬性陣列(13/14)

屬性陣列(14/14)

練習2-1-3

事件繫結Event Binding

事件

事件繫結 event binding(1/4)

事件繫結 event binding(2/4)

什麼是DOM事件？(3/4)

事件繫結呼叫事件處理器(4/4)

練習2-1-4

UI元件介紹List

ion-list基本格式搭配ion-icon(1/3)

ion-list綜合練習(2/3)

ion-list綜合練習(3/3)

練習2-2 ion-list

練習2-2摘要

練習2-2摘要

練習2-2摘要

元件介紹Card

ion-card練習範例(1/3)

ion-card練習範例(2/3)

ion-card練習範例(3/3)

Ionic App範例架構

新增頁面與Routing

新增頁面與Routing練習

新增頁面與Routing使用路徑

新增頁面與Routing範例

新增頁面與Routing範例

頁面間傳遞資料

頁面間傳遞參數

傳遞參數範例陣列資料(1/10)

傳遞參數範例清單/細節瀏覽(2/10)

傳遞參數範例撰寫Home.Page元件(3/10)

傳遞參數範例route設定(4/10)

傳遞參數範例撰寫Home.Page元件(5/10)

傳遞參數範例撰寫Home.Page元件(6/10)

傳遞參數範例撰寫Home.Page元件(7/10)

傳遞參數範例撰寫DetailPage元件(8/10)

傳遞參數範例撰寫DetailPage元件(9/10)

傳遞參數範例關於取得陣列內容(10/10)

傳遞參數範例DetailPage完整內容

傳遞參數範例DetailPage完整內容

練習

屬性基本用法: 內插(1/14)

屬性字串、數值(3/14)

屬性字串、數值(4/14)

屬性基本用法:屬性繫結與內插(5/14)

屬性字串、數值(6/14)

屬性字串、數值(7/14)

屬性屬性繫結其他用法(11/14)