Angular Frontend သင်တန်း

သင်ခန်းစာ 1 • Angular မော်ဂျူးများနှင့် အပလီကေးရှင်း Bootstrap

NgModules၊ root AppModule နှင့် Angular သည် အက်ပ်လီကေးရှင်းကို မည်သို့ bootstraps လုပ်သည်ကို ရှင်းပြသည်။ အစိတ်အပိုင်းများ မတည်ဆောက်မီ လိုအပ်သော ဖွဲ့စည်းတည်ဆောက်ပုံဆိုင်ရာ ဆက်စပ်အကြောင်းအရာကို ပံ့ပိုးပေးသည်။

သင်ခန်းစာ 2 • Angular အတွက် TypeScript အခြေခံများ

Angular ကုဒ်ကို ယုံကြည်စွာ ရေးသားရန် လိုအပ်သော TypeScript အမျိုးအစားများ၊ interfaces များနှင့် decorators များကို မိတ်ဆက်ပေးသည်။ JavaScript အသိပညာကို Angular ၏ အမျိုးအစား ဂေဟစနစ်သို့ ချိတ်ဆက်ပေးသည်။

သင်ခန်းစာ 3 • Angular ဘောင် မိတ်ဆက်

ခေတ်မီ ဖရွန့်-အင်း ဖွံ့ဖြိုးရေးတွင် Angular ၏ အခန်းကဏ္ဍနှင့် ၎င်း၏ MVC-မှုတ်သွင်းထားသော ဗိသုကာကို အကျုံးဝင်သည်။ နောက်ဆက်တွဲ ဘောင်ဆိုင်ရာ အကြောင်းအရာများအားလုံးအတွက် အခြေခံသဘောတရားကို သတ်မှတ်ပေးသည်။

သင်ခန်းစာ 4 • ဖွံ့ဖြိုးရေး ပတ်ဝန်းကျင် တည်ဆောက်ခြင်း

Node.js၊ npm နှင့် Angular CLI တို့ကို ထည့်သွင်းပြီး ပြင်ဆင်သတ်မှတ်သည်။ ကျောင်းသားတိုင်းတွင် တစ်သမတ်တည်းဖြစ်ပြီး ပြန်လည်ထုတ်လုပ်နိုင်သော ဒေသတွင်း အလုပ်နေရာတစ်ခု ရှိကြောင်း သေချာစေသည်။

သင်ခန်းစာ 1 • တည်ဆောက်ထားသော Structural Directives များ

DOM ဖွဲ့စည်းပုံကို လှုပ်ရှားပြောင်းလဲစွာ ထိန်းချုပ်ရန် *ngIf၊ *ngFor နှင့် *ngSwitch တို့ကို အသုံးချသည်။ Directive များသည် တမ်းပလိတ်၏ ဖော်ပြနိုင်စွမ်းကို မည်သို့တိုးချဲ့သည်ကို သရုပ်ပြသည်။

သင်ခန်းစာ 2 • Property နှင့် Event Binding

Property binding မှတစ်ဆင့် တစ်လမ်းသွား ဒေတာစီးဆင်းမှုနှင့် event binding မှတစ်ဆင့် အသုံးပြုသူ-ဖြစ်ရပ် ကိုင်တွယ်ခြင်းကို သင်ကြားပေးသည်။ အစိတ်အပိုင်း ယုတ္တိကို DOM အစိတ်အပိုင်းများနှင့် အသုံးပြုသူ အပြန်အလှန်တုံ့ပြန်မှုများသို့ ချိတ်ဆက်ပေးသည်။

သင်ခန်းစာ 3 • တမ်းပလိတ် Syntax နှင့် အသုံးအနှုန်းများ

Angular ၏ တမ်းပလိတ် အသုံးအနှုန်း ဘာသာစကား၊ ဘေးကင်းသော လမ်းညွှန်မှုနှင့် တမ်းပလိတ် ရည်ညွှန်း ကိန်းရှင်များကို အကျုံးဝင်သည်။ အစိတ်အပိုင်း မြင်ကွင်းများအတွင်း လှုပ်ရှားပြောင်းလဲသော အကြောင်းအရာ ပုံဖော်ခြင်းကို ဖွင့်ပေးသည်။

သင်ခန်းစာ 4 • အစိတ်အပိုင်း ဘဝစက်ဝန်း Hooks များ

ngOnInit မှ ngOnDestroy အထိ ဘဝစက်ဝန်း hook အစီအစဉ် အပြည့်အစုံကို လေ့လာသည်။ စတင်ခြင်းနှင့် သန့်ရှင်းရေးအတွက် hook တစ်ခုစီကို မည်သည့်အချိန်နှင့် အဘယ်ကြောင့် အသုံးပြုရမည်ကို သင်ကြားပေးသည်။

သင်ခန်းစာ 1 • ViewChild နှင့် ContentChild Queries များ

Query များမှတစ်ဆင့် ကလေး အစိတ်အပိုင်း instances များနှင့် ပုံဖော်ထားသော အကြောင်းအရာများကို programmatically ဝင်ရောက်သည်။ တမ်းပလိတ် binding ထက်ကျော်လွန်သော အဆင့်မြင့် အစိတ်အပိုင်း ပူးပေါင်းဆောင်ရွက်မှုကို ဖွင့်ပေးသည်။

သင်ခန်းစာ 2 • @Input ဖြင့် မိဘမှ ကလေးသို့ ဆက်သွယ်ခြင်း

အစိတ်အပိုင်း သစ်ပင်အောက်သို့ ဒေတာပေးပို့ရန်နှင့် setter များဖြင့် input ကို အတည်ပြုရန် @Input ကို အသုံးပြုသည်။ Angular တွင် အဓိက အောက်ဘက်သို့ ဒေတာစီးဆင်းမှုပုံစံကို တည်ထောင်ပေးသည်။

သင်ခန်းစာ 3 • စိတ်ကြိုက် Structural Directives များ တည်ဆောက်ခြင်း

DOM ကို ခြယ်လှယ်ရန် TemplateRef နှင့် ViewContainerRef တို့ကို အသုံးပြု၍ structural directives များကို အကောင်အထည်ဖော်သည်။ ပြန်လည်အသုံးပြုနိုင်သော အပြင်အဆင် ယုတ္တိကို ဖန်တီးရန် ကျောင်းသားများ၏ စွမ်းရည်ကို တိုးချဲ့ပေးသည်။

သင်ခန်းစာ 4 • စိတ်ကြိုက် Attribute Directives များ တည်ဆောက်ခြင်း

DOM ဖွဲ့စည်းပုံကို မပြောင်းလဲဘဲ host ဒြပ်စင်၏ အသွင်အပြင် သို့မဟုတ် အပြုအမူကို မွမ်းမံသော directives များကို ဖန်တီးသည်။ အခန်း 2 တွင် မိတ်ဆက်ထားသော directive ပုံစံကို အားဖြည့်ပေးသည်။

သင်ခန်းစာ 1 • Angular ဝန်ဆောင်မှုများ ဖန်တီးခြင်းနှင့် ပံ့ပိုးပေးခြင်း

CLI ဖြင့် ဝန်ဆောင်မှုများကို ထုတ်လုပ်ပြီး ၎င်းတို့ကို module၊ အစိတ်အပိုင်း သို့မဟုတ် root နယ်ပယ်တွင် မှတ်ပုံတင်သည်။ မျှဝေထားသော ယုတ္တိအတွက် နေရာအဖြစ် ဝန်ဆောင်မှု အလွှာကို တည်ထောင်ပေးသည်။

သင်ခန်းစာ 2 • HTTP Client နှင့် REST API ပေါင်းစည်းခြင်း

HttpClientModule ကို ပြင်ဆင်သတ်မှတ်ပြီး GET၊ POST၊ PUT နှင့် DELETE တောင်းဆိုမှုများကို လုပ်ဆောင်သည်။ ဝန်ဆောင်မှု အလွှာကို နောက်ခံဘက်ခြမ်း ဒေတာရင်းမြစ်များနှင့် ချိတ်ဆက်ပေးသည်။

သင်ခန်းစာ 3 • အမှားကိုင်တွယ်ခြင်းနှင့် HTTP Interceptors များ

catchError ဖြင့် ကမ္ဘာလုံးဆိုင်ရာ အမှားကိုင်တွယ်ခြင်းနှင့် interceptors များဖြင့် တောင်းဆိုမှု/တုံ့ပြန်မှု ပြောင်းလဲခြင်းကို အကောင်အထည်ဖော်သည်။ ထုတ်လုပ်မှုအတွက် အသင့်ဖြစ်သော HTTP ဆက်သွယ်မှုပုံစံများကို ထုတ်လုပ်ပေးသည်။

သင်ခန်းစာ 4 • မှီခိုမှု ထည့်သွင်းခြင်း အသေးစိတ် လေ့လာခြင်း

DI အဆင့်ဆင့်၊ injection tokens များနှင့် ပံ့ပိုးပေးသူ အမျိုးအစားများကို လေ့လာသည်။ အက်ပ်တစ်ခွင် မှီခိုမှုများကို မည်သို့ဖြေရှင်းသည်ကို ကောင်းမွန်သော ထိန်းချုပ်မှု ဖွင့်ပေးသည်။

သင်ခန်းစာ 1 • Route Guards နှင့် ဝင်ရောက်ခွင့် ထိန်းချုပ်မှု

လမ်းကြောင်းများကို ကာကွယ်ရန် CanActivate၊ CanDeactivate နှင့် CanLoad guards များကို အကောင်အထည်ဖော်သည်။ အထောက်အထားစိစစ်ခြင်းနှင့် ခွင့်ပြုချက်ကို သွားလာခြင်း အလွှာတွင် ပေါင်းစည်းသည်။

သင်ခန်းစာ 2 • Lazy Loading နှင့် Route Resolvers များ

အက်ပ်ကို လိုအပ်သလို တင်သည့် feature modules များအဖြစ် ခွဲထုတ်ပြီး resolvers များဖြင့် ဒေတာကို ကြိုတင်ယူသည်။ ကနဦး တင်ခြင်း စွမ်းဆောင်ရည်နှင့် အသုံးပြုသူ အတွေ့အကြုံကို တိုးတက်စေသည်။

သင်ခန်းစာ 3 • အသိုက်လုပ်ထားသော Routes များနှင့် အမည်ပေးထားသော Outlets များ

မိဘ routes များအောက်တွင် ကလေး routes များကို ဖွဲ့စည်းပြီး အရန်မြင်ကွင်းများအတွက် အမည်ပေးထားသော outlets များကို အသုံးပြုသည်။ ကြီးမားသော အပလီကေးရှင်းများတွင် ရှုပ်ထွေးသော အပြင်အဆင် လိုအပ်ချက်များကို ပံ့ပိုးပေးသည်။

သင်ခန်းစာ 4 • Router တည်ဆောက်ခြင်းနှင့် အခြေခံ သွားလာခြင်း

Route သတ်မှတ်ချက်များ၊ router-outlet နှင့် routerLink ဖြင့် RouterModule ကို ပြင်ဆင်သတ်မှတ်သည်။ သွားလာခြင်း အင်္ဂါရပ်များအားလုံးအတွက် အခြေခံအုတ်မြစ်ကို တည်ထောင်ပေးသည်။

သင်ခန်းစာ 1 • FormArray ဖြင့် လှုပ်ရှားပြောင်းလဲနိုင်သော ဖောင့်များ

ပြောင်းလဲနိုင်သော အလျားဒေတာအတွက် FormArray ကို အသုံးပြု၍ runtime တွင် ဖောင့် ထိန်းချုပ်မှုများကို ထည့်သွင်းခြင်းနှင့် ဖယ်ရှားခြင်း။ ထပ်တလဲလဲ လိုင်း items များကဲ့သို့သော လက်တွေ့ကမ္ဘာ အခြေအနေများကို ကိုင်တွယ်သည်။

သင်ခန်းစာ 2 • Validators များနှင့် စိတ်ကြိုက် အတည်ပြုခြင်း

တစ်ပြိုင်တည်းနှင့် တစ်ပြိုင်တည်းမဟုတ်သော validators များကို အသုံးချပြီး ပြန်လည်အသုံးပြုနိုင်သော စိတ်ကြိုက် validator functions များကို ဖန်တီးသည်။ တင်ပြခြင်းမပြုမီ ဒေတာ ခိုင်မာမှုကို သေချာစေသည်။

သင်ခန်းစာ 3 • ဖောင့် တင်ပြခြင်းနှင့် State စီမံခန့်ခွဲမှု

ပွတ်တိုက်ပြီးသား UX ကို ပေးပို့ရန် ဖောင့် တင်ပြခြင်း၊ ပြန်လည်သတ်မှတ်ခြင်းနှင့် dirty/touched state ကို ကိုင်တွယ်သည်။ အခန်း 4 တွင် မိတ်ဆက်ထားသော ဝန်ဆောင်မှု ခေါ်ဆိုမှုများသို့ ဖောင့်ဒေတာကို ချိတ်ဆက်ပေးသည်။

သင်ခန်းစာ 4 • Template-Driven ဖောင့်များ

တမ်းပလိတ်တွင် ကြေညာချက်အလိုက် ဖောင့်များတည်ဆောက်ရန် ngForm၊ ngModel နှင့် တည်ဆောက်ထားသော validators များကို အသုံးပြုသည်။ TypeScript အနည်းငယ်မျှသာ အသုံးပြု၍ ဖောင့် အယူအဆများကို မိတ်ဆက်ပေးသည်။

သင်ခန်းစာ 1 • NgRx Entity နှင့် DevTools

NgRx Entity ဖြင့် စုဆောင်းမှု စီမံခန့်ခွဲခြင်းကို ရိုးရှင်းစေပြီး Redux DevTools ဖြင့် state ကို စစ်ဆေးသည်။ Store အလေးပေးသော အင်္ဂါရပ်များ၏ ဖွံ့ဖြိုးတိုးတက်မှုနှင့် အမှားရှာဖွေခြင်းကို အရှိန်မြှင့်ပေးသည်။

သင်ခန်းစာ 2 • NgRx Store မိတ်ဆက်

NgRx ကို ထည့်သွင်းပြီး feature အပိုင်းတစ်ခုအတွက် actions များ၊ reducers များနှင့် store ကို သတ်မှတ်သည်။ Angular ဂေဟစနစ်အတွင်း Redux ပုံစံကို တည်ထောင်ပေးသည်။

သင်ခန်းစာ 3 • BehaviorSubject ဖြင့် ဝန်ဆောင်မှု-အခြေခံ State

ဝန်ဆောင်မှုတစ်ခုတွင် BehaviorSubject ကို အသုံးပြု၍ အစိတ်အပိုင်းများကြား state ကို သိမ်းဆည်းပြီး မျှဝေသည်။ NgRx ကို မိတ်ဆက်ခြင်းမပြုမီ ပေါ့ပါးသော state ဖြေရှင်းချက်တစ်ခုကို ပံ့ပိုးပေးသည်။

သင်ခန်းစာ 4 • ဘေးထွက်သက်ရောက်မှုများအတွက် NgRx အကျိုးသက်ရောက်မှုများ

NgRx Effects ကို အသုံးပြု၍ reducers များအပြင်ဘက်ရှိ HTTP ခေါ်ဆိုမှုများကဲ့သို့သော async လုပ်ဆောင်ချက်များကို ကိုင်တွယ်သည်။ Reducer များကို သန့်ရှင်းစေပြီး side-effect ယုတ္တိကို ဗဟိုချုပ်ကိုင်ထားသည်။

သင်ခန်းစာ 1 • ဖြန့်ကျက်မှု ဗျူဟာများနှင့် CI/CD ပေါင်းစည်းခြင်း

Angular တည်ဆောက်မှုများကို တည်ငြိမ်သော ဟော်စတင်းသို့ ဖြန့်ကျက်ပြီး စဉ်ဆက်မပြတ် ဖြန့်ဝေမှုအတွက် အလိုအလျောက် ပိုက်လိုင်းများကို ပေါင်းစည်းသည်။ ဖွံ့ဖြိုးရေး ဘဝစက်ဝန်းကို ကုဒ်မှ ထုတ်လုပ်မှုအထိ အဆုံးသတ်စေသည်။

သင်ခန်းစာ 2 • အစိတ်အပိုင်းများနှင့် ဝန်ဆောင်မှုများ၏ ယူနစ် စမ်းသပ်ခြင်း

အစိတ်အပိုင်းများ၊ ဝန်ဆောင်မှုများနှင့် pipe များအတွက် Jasmine နှင့် TestBed ဖြင့် ယူနစ် စမ်းသပ်မှုများကို ရေးသားသည်။ ပေါင်းစည်းခြင်းမပြုမီ သီးခြားယူနစ်များကို အတည်ပြုသည်။

သင်ခန်းစာ 3 • Bundle အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်းနှင့် တည်ဆောက်မှု ပြင်ဆင်သတ်မှတ်ခြင်း

အကောင်းဆုံး bundle အရွယ်အစားအတွက် ထုတ်လုပ်မှု တည်ဆောက်မှုများ၊ tree shaking နှင့် ကွဲပြားသော တင်ခြင်းတို့ကို ပြင်ဆင်သတ်မှတ်သည်။ အက်ပ်ကို လက်တွေ့ကမ္ဘာ ဖြန့်ကျက်မှု ကန့်သတ်ချက်များအတွက် ပြင်ဆင်ပေးသည်။

သင်ခန်းစာ 4 • Cypress ဖြင့် အဆုံးမှအဆုံး စမ်းသပ်ခြင်း

အပလီကေးရှင်း အပြုအမူကို အပြည့်အဝ အတည်ပြုရန် Cypress ဖြင့် အသုံးပြုသူ-စီးဆင်းမှု စမ်းသပ်ခြင်းကို အလိုအလျောက်လုပ်ဆောင်သည်။ လက်တွေ့ကျသော browser-based အခြေအနေများဖြင့် ယူနစ် စမ်းသပ်မှုများကို ဖြည့်စွက်ပေးသည်။