Uncategorized

ionic framework generate page and link to page

Byadmin

Mar 23, 2026

สร้างหน้า page ใหม่

1.กดเข้าไปที่ folder งานของเราวันก่อน

2.เปิด cmd ใน path ของ folder myweb1

3. สร้าง page (หน้าใหม่) ด้วยคำสั่งนี้ลงไป

ionic generate page pages/test

สั่งให้ ionic สร้าง page หน้าใหม่ ให้อยู่ใน folder pages ชื่อไฟล์ test (ถ้าไม่กำหนด pages/test กำหนด test อย่างเดียวจะไม่มี folder)

4. ไปที่ปุ่ม start ค้นหาโปรแกรม visual studio code หรือพิมพ์ vis จะขึ้นมาให้เลือก เปิดโปรแกรม visual studio code ขึ้นมา

ลองพิมพ์ชื่อตัวเองลงไปในหน้า folder.page.html ดังภาพ แล้ว save

5. แสดงผลหน้าเว็บที่เราทำการแก้ไข โดยกลับไป cmd แล้วพิมพ์คำสั่ง

ionic serve

6. เราจะทำ เมนูหน้า pages test ที่สร้างในคำสั่งก่อนหน้านี้มาแสดงผล เริ่มจากกลับไปที่ visual studio code เลือกหาไฟล์ที่ชื่อว่า app.companent.ts (จะอยู่ใน src->app->)

เราจะกลับไปหน้าเว็บกด refresh แล้วจะมีเมนู test แล้วกดเข้าไปดูหน้า test ที่สร้างได้ตามภาพ

7. จะเข้าไปที่ ionic ui companent จะเข้าไป copy code gui ของ ionic มาใช้เพื่อเพิ่มความสวยงาม

กลับไปที่ vs code เอาโค้ดไปวาง

ให้กลับไปที่ ionic ui companent ทำการ copy ใน companent.ts ที่มีการเรียกใช้ ion card จะมี 2 ที่

ตัวอย่างโค้ดในหน้า test.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">test</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-card>
  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

</ion-content>

ตัวอย่างโค้ดในหน้า test.page.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
  standalone: true,
  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle,IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
})
export class TestPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

หลังจาก save จะได้หน้าตาเว็บประมาณนี้

8. เอาภาพมาใส่ใน ion-card

ไปโหลดไฟล์ภาพมาเก็บไว้ที่ folder ionic/myweb1/src/assets

กลับมาที่ visual studio code จะมีไฟล์ mydog.png เข้ามาในโปรเจคเรา หลังจากนั้นไปที่ไฟล์ test.page.html เอารูปที่ save มาไปใส่ใน ion-card เพื่อแสดงผล

code หน้า test.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">test</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-card>
  <img alt="Silhouette of mountains" src="assets/mydog.png" />
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

</ion-content>

9. เอาขึ้น github.com โดยจะสร้าง repository ใหม่