DEV Community

c_nooknook_daily_prompt
c_nooknook_daily_prompt

Posted on

Angular for beginner

#webdev #programming #beginners #tutorial

โครงสร้างโปรเจกต์ Angular ที่เป็น มาตรฐานและสามารถขยายได้ในระยะยาว ซึ่งเหมาะกับโปรเจกต์ที่มี components, routes, services, types, และ pages

🏗️ โครงสร้างโปรเจกต์ Angular (แนะนำ)

src/
├── app/
│   ├── core/                      # ส่วนกลางที่ใช้ทั่วทั้งแอป (singleton services, guards, interceptors)
│   │   ├── services/
│   │   ├── guards/
│   │   ├── interceptors/
│   │   └── core.module.ts
│
│   ├── shared/                    # ส่วนที่แชร์ได้ทุกหน้า (components, pipes, directives, models)
│   │   ├── components/
│   │   ├── pipes/
│   │   ├── directives/
│   │   ├── models/               # types/interfaces ที่แชร์ได้
│   │   └── shared.module.ts
│
│   ├── pages/                     # แต่ละหน้า เช่น Home, Login, Dashboard ฯลฯ
│   │   ├── home/
│   │   │   ├── components/       # components เฉพาะของหน้า home
│   │   │   ├── home.component.ts
│   │   │   ├── home.module.ts
│   │   │   └── home-routing.module.ts
│   │   └── ...
│
│   ├── app-routing.module.ts     # รวม routes ทั้งหมด
│   ├── app.component.ts
│   └── app.module.ts
│
├── assets/                       # รูปภาพ, ไอคอน, ไฟล์ static
├── environments/                # ไฟล์ config สำหรับ dev/prod
│   ├── environment.ts
│   └── environment.prod.ts
├── styles/                       # SCSS/CSS global styles
│   └── main.scss
└── main.ts
Enter fullscreen mode Exit fullscreen mode

🧠 รายละเอียดแต่ละโฟลเดอร์

โฟลเดอร์ หน้าที่
core/ สำหรับ services ที่ใช้ทั่วแอป เช่น AuthService, ApiService, TokenInterceptor, AuthGuard
shared/ สำหรับ components/pipes/directives ที่ใช้ร่วมกัน เช่น ButtonComponent, DatePipe, CardComponent, รวมถึง types หรือ interfaces
pages/ แต่ละหน้าแยกเป็น module ชัดเจน เช่น /home, /login, /dashboard
models/ หรือ types/ สำหรับสร้าง interface ของข้อมูล เช่น User, Product, Order, ใช้ภายใต้ shared/models/ หรือ shared/types/
routes มักอยู่ใน app-routing.module.ts และแยกเป็น xxx-routing.module.ts สำหรับแต่ละ module

✅ ตัวอย่างการตั้งชื่อ

📄 shared/models/user.model.ts

export interface User {
  id: string;
  username: string;
  email: string;
}
Enter fullscreen mode Exit fullscreen mode

📁 pages/home/home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {}
Enter fullscreen mode Exit fullscreen mode

📁 app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomeModule),
  },
  // ...
];
Enter fullscreen mode Exit fullscreen mode

📁 core/services/api.service.ts

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  get<T>(url: string): Observable<T> {
    return this.http.get<T>(url);
  }
}
Enter fullscreen mode Exit fullscreen mode

📌 สรุป

สิ่งที่คุณต้องการ อยู่ตรงไหนในโครงสร้าง
Components shared/components/, หรือ pages/[page]/components/
Routes app-routing.module.ts, xxx-routing.module.ts
Types / Interfaces shared/models/ หรือ shared/types/
Services core/services/
Pages pages/[pagename]/

ถ้าคุณต้องการใช้ Angular CLI เพื่อ generate โครงสร้างโปรเจกต์ที่ดีตั้งแต่ต้น พร้อมกับ routing แยกหน้า (lazy loading), services, และ components ได้อัตโนมัติ

✅ เริ่มต้นสร้างโปรเจกต์ Angular

ng new my-angular-app --routing --style=scss
Enter fullscreen mode Exit fullscreen mode

--routing: สร้างไฟล์ app-routing.module.ts ให้อัตโนมัติ

--style=scss: เลือกใช้ SCSS แทน CSS

เข้าไปในโปรเจกต์:

cd my-angular-app
Enter fullscreen mode Exit fullscreen mode

✅ 1. สร้างหน้า (page) แบบ Lazy Load + Routing
เช่น หน้า Home

ng generate module pages/home --route home --module app.module
Enter fullscreen mode Exit fullscreen mode

Angular จะสร้างให้อัตโนมัติแบบ lazy loading:

src/app/pages/home/
├── home-routing.module.ts
├── home.module.ts
└── home.component.ts
Enter fullscreen mode Exit fullscreen mode

🔁 สร้างหน้าต่อไป เช่น Login, Dashboard:

ng generate module pages/login --route login --module app.module
ng generate module pages/dashboard --route dashboard --module app.module
Enter fullscreen mode Exit fullscreen mode

✅ 2. สร้าง Shared Components

ng generate module shared/shared --module app
ng generate component shared/components/button
ng generate component shared/components/card
Enter fullscreen mode Exit fullscreen mode

คุณสามารถ export component ใน shared.module.ts ได้:

@NgModule({
  declarations: [ButtonComponent, CardComponent],
  exports: [ButtonComponent, CardComponent],
})
export class SharedModule {}
Enter fullscreen mode Exit fullscreen mode

✅ 3. สร้าง Services
สร้างใน core/services/:

ng generate module core/core --module app
ng generate service core/services/api
ng generate service core/services/auth
Enter fullscreen mode Exit fullscreen mode

services เหล่านี้จะเป็น singleton ถ้าเพิ่ม providedIn: 'root' (default)

✅ 4. สร้าง Types หรือ Interfaces
สร้างไฟล์ใน src/app/shared/models/:

// user.model.ts
export interface User {
  id: number;
  name: string;
  email: string;
}
Enter fullscreen mode Exit fullscreen mode

✅ 5. สร้าง Guards, Interceptors (optionally)

ng generate guard core/guards/auth
ng generate interceptor core/interceptors/token
Enter fullscreen mode Exit fullscreen mode

📦 ตัวอย่างโครงสร้างที่ได้

src/app/
├── core/
│   ├── services/
│   │   ├── api.service.ts
│   │   └── auth.service.ts
│   ├── guards/
│   ├── interceptors/
│   └── core.module.ts
│
├── shared/
│   ├── components/
│   │   ├── button/
│   │   └── card/
│   ├── models/
│   │   └── user.model.ts
│   └── shared.module.ts
│
├── pages/
│   ├── home/
│   ├── login/
│   └── dashboard/
│
├── app-routing.module.ts
└── app.module.ts
Enter fullscreen mode Exit fullscreen mode

🚀 พร้อมใช้งาน!
รันโปรเจกต์:

ng serve
Enter fullscreen mode Exit fullscreen mode

เปิดเบราว์เซอร์ที่ http://localhost:4200/home หรือ /login, /dashboard ได้เลย

Top comments (0)