Angular Getting Started

Angular Logo

What is Angular?

Angular ဆိုတာ Google ကတီထွင်ထားတဲ့ single-page client application တွေရေးသားနိုင်တဲ့ TypeScript-based framework ဖြစ်တယ်။ ဒါကြောင့် ရေးသားတဲ့အခါမှာ TypeScript ကိုအသုံးပြု ရေးသားရမှာ ဖြစ်ပါတယ်။

What can we do with Angular?

Angular ကိုအသုံးပြုပြီး website, web app, PWA တွေအပြင် mobile application တွေနဲ့ desktop application တွေပါ ရေးသားနိုင်ပါတယ်။

AngularJS vs Angular

AngularJS ဆိုတာ version 1.x.x ကိုခေါ်တာဖြစ်ပြီး ပထမဆုံးတီထွင်ခဲ့တဲ့ Angular framework ဖြစ်ပါတယ်။ AngularJS ထပ်ပိုကောင်းအောင် ပြင်ဆင်ရေးသားခဲ့ပြီး Angular လို့ပဲခေါ်မဲ့ major version ကိုထပ်ထုတ်ခဲ့ပါတယ်။ Angular ဆိုတာကတော့ version 2 နဲ့အထက်ကို ခေါ်တာဖြစ်ပြီး လက်ရှိအသုံးပြုနေတဲ့ Angular ဖြစ်တယ်။ အခုဆိုရင် version 12 ရောက်နေပြီဖြစ်တယ်။

ဒီ Article Series သည် Angular 12 ဖြင့် compatible ဖြစ်ပြီး အသစ်ထွက်ရှိလာတဲ့ version တွေအတွက်လည်း update လုပ်ပေးသွားမှာဖြစ်ပါတယ်။

Angular vs React vs Vue

Angular vs React vs Vue

Angular ⭐⭐⭐

စတင်လေ့လာရာမှာ အသင့်အတင့်ခက်ခဲမှု ရှိတယ်။ TypeScript အသုံးပြုတဲ့ framework ဖြစ်တယ်။ လိုအပ်တဲ့ library အားလုံးပါဝင်ပြီးသား one-stop framework ဖြစ်တယ်။

အားသာချက် — library တွေကို Angular team ကပဲ develop လုပ်ထားတဲ့အတွက် dependency issues, performance issues စတာတွေ စဥ်းစားစရာမလိုပဲ တန်းလေ့လာ အသုံးချနိုင်တယ်။

အားနည်းချက် — library တွေအကုန်စုပေးထားတဲ့အတွက် အသုံးမပြုလည်း ပါဝင်နေမှာဖြစ်လို့ file size ကြီးနိုင်မယ်။ Angular Ecosystem ကကိုယ့်အတွက် အသစ်ဖြစ်နေမယ်ဆို လေ့လာရတာ များနိုင်တယ်။

React ⭐⭐⭐

စတင်လေ့လာရာမှာ အသင့်အတင့်ခက်ခဲမှု ရှိတယ်။ JS အသုံးပြုထားတဲ့ framework ဖြစ်တယ်။ Facebook က တီထွင်ထားတာ ဖြစ်တယ်။ မပါမဖြစ် core library တွေပဲ ထည့်ပေးထားတယ်။

အားသာချက် — library တွေကိုကြိုက်တဲ့ library ထည့်သုံးနိုင်တယ်။ Community ကြီးတယ်။ Core library တွေပဲပါလို့ library ထပ်မထည့်ထားဘူးဆိုရင် file size သေးတယ်။

အားနည်းချက် — community library တွေထည့်သုံးရတာဖြစ်လို့ dependency issues, performance issues တွေ ကိုယ့်ဘာသာဖြေရှင်းရမယ်။ စတင်လေ့လာမဲ့သူတွေအတွက် ရေးနည်းရေးဟန် လေ့လာရတာ အနည်းငယ် ခက်နိုင်တယ်။

Vue ⭐⭐

စတင်လေ့လာရာမှာ လွယ်ကူတယ်။ JS အသုံးပြုထားတဲ့ framework ဖြစ်တယ်။ Evan You ဆိုတဲ့ တရုတ် developer ကတီထွင်ခဲ့တာဖြစ်တယ်။ သူက Google မှာ Angular Projects တွေရေးသားနေရင်းကနေ အကြံရပြီး ပေါ့ပါးသေးငယ်တဲ့ framework ဖြစ်တဲ့ Vue ကိုရေးသားခဲ့တယ်။

အားသာချက် — Project setup လုပ်ရတာ အလွယ်ဆုံးဖြစ်တယ်။ Vue JS ကို header tag မှာထည့်လိုက်တာနဲ့ Vue စရေးလို့ရပြီဖြစ်တယ်။ ရေးသားရာမှာလည်း Vanilla JS အတိုင်းရေးသားရတာဖြစ်လို့ ရေးထုံးသက်သက် ထပ်လေ့လာစရာမလို့ပဲ မြန်မြန်နဲ့ အလုပ်ဖြစ်တယ်။

အားနည်းချက် — Core library သာပါလို့လိုအပ်တဲ့ library တွေ ထပ်ထည့်သုံးရတယ်။ သူလည်း React လိုပဲ community library တွေသုံးလို့ဖြစ်တဲ့ အားနည်းချက်တွေရှိတယ်။ လေ့လာစမှာလွယ်ပေမဲ့ နောက်ပိုင်းမှာ အသင့်အသင့် ခက်ခဲမှုတွေ ကြုံလာရမှာ ဖြစ်တယ်။

Framework ၃ ခုလုံးဟာ သိပ်မကွာတဲ့အတွက် တစ်ခုကို ကောင်းကောင်းသိပြီဆိုရင် တခြားတစ်ခုကိုလည်း အလွယ်တကူ လေ့လာလို့ ရမှာဖြစ်ပါတယ်။

Prerequisites

Angular အသုံးပြုရေးသားဖို့အတွက် မသိမဖြစ် သိထားရမှာတွေကတော့ -

• HTML, CSS, JavaScript(ES6) — အသင့်အတင့်သိရမယ်
• TypeScript — အခြေခံလောက်သိရမယ်
• Bootstrap, Material, others — UI framework တစ်ခုခုသိထားသင့်တယ်
• Git — အခြေခံလောက်သိရမယ်
• npm — အနည်းငယ်သိရမယ် (npm update လုပ်နည်း ဒီမှာ ကြည့်ပါ)
• nodeJS — အနည်းငယ်သိရမယ်

Environment Setup

1. NodeJS install လုပ်ထားရပါမယ်။
2. Angular CLI ကို အောက်ပါအတိုင်း install လုပ်ပါ။

npm install -g @angular/cli

3. Code Editor ကို VS Code အသုံးပြုရေးသားသွားမှာ ဖြစ်ပါတယ်။

4. Chrome Browser ကိုသုံးပါ။ တခြား browser ထက် Chrome မှာပဲ error မှန်မှန်ကန်ကန်ပြပေးပါတယ်။

5. Angular DevTools plugin ကိုထည့်ပါ။

Optional Setup

VS Code Plugin အနေနဲ့ Angular Essentials (Version 11) ထည့်လိုက်ရင် လိုအပ်တဲ့ plugin တွေအကုန်ထည့်ပြီးသား ဖြစ်သွားမှာပါ။

Font အနေနဲ့ JetBrains Mono ကိုအသုံးပြုရင်ပိုကောင်းပါတယ်။ Font ligatures ပါတဲ့အတွက် ပိုပြီးကြည့်လို့ကောင်းစေပါတယ်။

Reference

ဒီ Angular article series သည် Udemy မှ အောက်ပါ course ကို မှီငြမ်းရေးသားထားခြင်းဖြစ်သည်။

Master Angular 7 (formerly Angular 2): The Complete Course

Angular ကိုမြန်မာလိုလေ့လာနိုင်တဲ့ YouTube Channel ကိုလည်း Subscribe လုပ်ထားသင့်ပါတယ်။

JDC - Angular

Next: Angular CLI And Bootstrap Setup