How an Angular App gets Loaded and Started

Photo by Bruno Nascimento on Unsplash

Angular ဆိုတာ single page application တွေတည်ဆောက်နိုင်တဲ့ framework တစ်ခုဖြစ်တယ်။ ဆိုတော့ server ဆီကနေ page တစ်ခုထဲကိုသာ ဆွဲယူလိုက်ပြီး browser မှာပြသပေးတာဖြစ်တယ်။

ဆိုလိုတာက page တစ်ခုပြောင်းသွားတိုင်း server ဆီက သွားဆွဲယူတာမျိုးမဟုတ်ပဲ page တစ်ခုထဲ (html file တစ်ခုထဲ) နဲ့ user လိုအပ်တာအားလုံးကို render လုပ်ယူပြီးပြသပေးတာမျိုးဖြစ်တယ်။

ဥပမာအနေနဲ့ ng serve လုပ်ထားတဲ့ blank project ကို view page source လုပ်ကြည့်လိုက်ရင်အခုလိုတွေ့ရမှာပါ။

view page source

ဒီမှာဆိုရင် ကိုယ်ရေးထားတဲ့ html tag တွေကိုတွေ့ရမှာ မဟုတ်ပဲ <app-root> ဆိုတဲ့ ထူးခြားတဲ့ element တစ်ခုနဲ့ js file တစ်ချို့ကို link လုပ်ထားတာကိုသာ မြင်တွေ့ရမှာပါ။

ဒီ code တွေဟာ project ရဲ့ src အောက်က index.html ကနေလာတာဖြစ်ပါတယ်။

src/index.html

index.html ကိုလေ့လာကြည့်ရင် title tag မှာ ကိုယ့် project ရဲ့ title ကိုတွေ့ရနိုင်ပြီး <app-root> element ကိုလည်းတွေ့ရမှာပါ။

ဆိုလိုတာက Angular သည် စတင်အလုပ်လုပ်တဲ့အခါမှာ ဒီ index.html ကိုဆွဲတင်လိုက်ပြီး DOM manipulation လုပ်ကာ သက်ဆိုင်ရာ html element တွေကိုပြသပေးတာဖြစ်ပါတယ်။

ဒီလို DOM manipulation လုပ်ဖို့ js file တွေလိုပါတယ်။ Angular ကဒီအတွက် main.ts ကိုအသုံးပြုပါတယ်။

Angular နဲ့ရေးသားထားတဲ့ code တွေဟာနောက်ဆုံးမှာ html, css, js အဖြစ်သို့ generate လုပ်ချလိုက်တယ်။

Project ရဲ့ src အောက်က main.ts ကိုဖွင့်ကြည့်လိုက်ပါ။

src/main.ts

main.ts ထဲမှာ import တစ်ချို့နဲ့ production mode စစ်ထားတဲ့ condition ကိုတွေ့ရမှာပါ။ အရေးကြီးဆုံးကတော့ line 11 ပါ။ bootstarpModule(AppModule) ဆိုတာဒီ application မှာအသုံးပြုပါဝင်မဲ့ Angular module သည် AppModule ဖြစ်တယ်လို့ပြောလိုက်တာပါ။ အလွယ်ပြောရရင်တော့ ရေးထားသမျှ code တွေက ဒီထဲမှာပါလို့ပြောလိုက်တာပါ။

AppModule ကိုဖွင့်ကြည့်လိုက်ရင်ဒီလိုတွေ့ရပါမယ်။

app.module.ts

ဒီထဲမှာ တခြားသော လုပ်ဆောင်ချက်တွေအပြင် အရေးကြီးတာကတော့ line 12 က bootstrap: [AppComponent] ပါ။ ဆိုလိုတာက ဒီ module ကို ဆွဲတင်သုံးတဲ့အခါ AppComponentကိုသုံးပါလို့ပြောထားတာပါ။ အလွယ်ပြောရရင် ဒီ component ကိုသုံးပါလို့ပြောချင်တာပါ။

ဒီလိုတွေချိတ်ဆက်ထားတာကြောင့်နောက်ဆုံးမှာ AppComponentကိုရောက်ရှိလာပါတယ်။

app.component.ts

AppComponent ရဲ့ line 4 မှာ app-root လို့ရေးထားတဲ့ selector ကိုမြင်တွေ့ရမှာပါ။ ဒီ app-root ဟာ index.html ထဲက <app-root> ပဲဖြစ်ပါတယ်။ ဒါကြောင့်ပဲ <app-root> နေရာမှာ ဒီ component ဟာဝင်ရောက်လာပြီး ရေးသားထားတဲ့ template ကိုပြသပေးနိုင်တာပဲဖြစ်ပါတယ်။

နောက်ကွယ်ကဖြစ်စဥ်ကတော့ Angular application စတင်တာနဲ့ index.html ဆွဲတင်တယ်အဲ့ထဲမှာ main.ts နဲ့ ချိတ်ဆက်ထားတဲ့ module တွေကို js bundle တွေအဖြစ် generate လုပ်ချလိုက်ပြီး index.html မှာလာ link ချိတ်ကာ DOM manipulation ပြုလုပ်ပြီးသက်ဆိုင်ရာ element တွေကိုပြသပေးတာပဲဖြစ်ပါတယ်။

Previous: Things to know before learning Angular

Next: Angular Component