Mini Project: Task Tracker (Part 1 - Setup & Structure)

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ project မှာ Angular CLI နဲ့ Task Tracker app တစ်ခုကို scratch ကနေ တည်ဆောက်သွားမှာဖြစ်ပါတယ်။ Component-based architecture, TypeScript interfaces နဲ့ routing setup တွေက Angular app တိုင်းရဲ့ foundation ဖြစ်တဲ့အတွက် ဒီ Part 1 မှာ folder structure, root component, task model interface နဲ့ list/detail route နှစ်ခုကို ပြင်ဆင်ထားမှာပါ။ Part 2 နဲ့ Part 3 တွေမှာ ဒီ structure ပေါ်မှာ feature တွေ ဆက်တည်ဆောက်သွားမှာမို့ ဒီအဆင့်ကို သေချာလုပ်ထားဖို့ အရေးကြီးပါတယ်။ Components, modules နဲ့ routing lesson တွေမှာ သင်ခဲ့တဲ့ concept တွေကို ဒီမှာ practical အနေနဲ့ ပေါင်းသုံးကြည့်ရမှာပါ။

လက်တွေ့ ဆောက်ကြည့်မယ်

Terminal မှာ `ng new task-tracker --routing --style=css` command သုံးပြီး project အသစ်တစ်ခု create လုပ်ပါ။ `src/app` အောက်မှာ `task.model.ts` file ဆောက်ပြီး `Task` interface (id, title, description, completed) ကို define လုပ်ပါ။ `TaskListComponent` နဲ့ `TaskDetailComponent` ဆိုတဲ့ component နှစ်ခု `ng generate component` နဲ့ ဆောက်ပြီး `app-routing.module.ts` မှာ path `''` ကို TaskListComponent ဆီ၊ path `task/:id` ကို TaskDetailComponent ဆီ route လုပ်ပါ။ AppComponent template ထဲမှာ `<router-outlet>` ထည့်ပြီး header title လေး ပြထားပါ။

• ng new နဲ့ routing enable ထားတဲ့ project အသစ် create လုပ်ပြီးပြီ
• Task interface နဲ့ TaskListComponent/TaskDetailComponent components ဆောက်ပြီးပြီ
• app-routing.module.ts ထဲမှာ route path 2 ခု configure လုပ်ပြီးပြီ

Code နမူနာ

// src/app/task.model.ts
export interface Task {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TaskListComponent } from './task-list/task-list.component';
import { TaskDetailComponent } from './task-detail/task-detail.component';

const routes: Routes = [
  { path: '', component: TaskListComponent },
  { path: 'task/:id', component: TaskDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ng serve run ထားရင် root path '/' မှာ TaskListComponent (empty list) ပေါ်လာပြီး header title ကို browser မှာ တွေ့ရမှာဖြစ်သည်။