สร้าง web application ด้วย angular

การสร้างเว็บแอปพลิเคชันด้วย Angular สามารถทำได้โดยใช้ Angular CLI

ขั้นที่ 1: ติดตั้ง Angular CLI

หากยังไม่ได้ติดตั้ง Angular CLI ให้ทำตามขั้นตอนต่อไปนี้:

  1. ดาวน์โหลด Node.js จากเว็บไซต์ทางการ: https://nodejs.org/en/
  2. ติดตั้ง Node.js ตามคำแนะนำบนหน้าจอ
  3. ตรวจสอบว่า Node.js และ npm ได้รับการติดตั้งอย่างถูกต้องโดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:
1
2
node -v
npm -v

ขั้นที่ 2: สร้างแอปพลิเคชัน Angular

เมื่อติดตั้ง Angular CLI แล้ว คุณสามารถสร้างแอปพลิเคชัน Angular ใหม่ได้โดยใช้คำสั่งต่อไปนี้:

1
ng new my-app

คำสั่งนี้จะสร้างโฟลเดอร์ใหม่ชื่อ “my-app” ที่มีโครงสร้างพื้นฐานสำหรับแอปพลิเคชัน Angular

ขั้นที่ 3: ปรับแต่งแอปพลิเคชัน

คุณสามารถปรับแต่งแอปพลิเคชันของคุณได้ตามต้องการ ตัวอย่างเช่น คุณสามารถเพิ่มคอมโพเนนต์ใหม่ เพิ่มสไตล์ และเพิ่มการโต้ตอบ

ขั้นที่ 4: เรียกใช้แอปพลิเคชัน

เมื่อปรับแต่งแอปพลิเคชันของคุณแล้ว คุณสามารถเรียกใช้แอปพลิเคชันได้โดยใช้คำสั่งต่อไปนี้:

1
ng serve

คำสั่งนี้จะเริ่มต้นเซิร์ฟเวอร์การพัฒนาและเปิดแอปพลิเคชันของคุณในเบราว์เซอร์เริ่มต้น

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างการสร้างเว็บแอปพลิเคชันด้วย Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# ติดตั้ง Angular CLI
npm install -g @angular/cli

# สร้างแอปพลิเคชัน Angular
ng new my-app

# ปรับแต่งแอปพลิเคชัน
cd my-app

# แก้ไขไฟล์ app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

constructor() {}

ngOnInit() {
}

}

# แก้ไขไฟล์ app.component.html
<h1>Hello, world!</h1>

# เรียกใช้แอปพลิเคชัน
ng serve

สรุป

การสร้างเว็บแอปพลิเคชันด้วย Angular สามารถทำได้โดยใช้ Angular CLI

Angular CLI จะช่วยคุณสร้างโครงสร้างพื้นฐานสำหรับแอปพลิเคชันของคุณและทำให้ง่ายต่อการเริ่มต้น

คุณสามารถปรับแต่งแอปพลิเคชันของคุณได้ตามต้องการ ตัวอย่างเช่น คุณสามารถเพิ่มคอมโพเนนต์ใหม่ เพิ่มสไตล์ และเพิ่มการโต้ตอบ