វគ្គសិក្សាអភិវឌ្ឍន៍ Front-end ជាមួយ Angular
ស្ទាត់ជំនាញ Angular ពីដំបូង និងកសាងកម្មវិធីទំព័រតែមួយដែលត្រៀមផលិតកម្មដោយភាពជឿជាក់។ វគ្គសិក្សានេះគ្របដណ្តប់គ្រប់យ៉ាងពីមូលដ្ឋានគ្រឹះ TypeScript និងស្ថាបត្យកម្មសមាសភាគ រហូតដល់ការគ្រប់គ្រងស្ថានភាព NgRx SSR និងការដាក់ឱ្យប្រើប្រាស់ CI/CD។ មិនថាអ្នកកំពុងបង្កើនជំនាញ front-end របស់អ្នក ឬផ្លាស់ប្តូរទៅការអភិវឌ្ឍន៍ Angular វិជ្ជាជីវៈ នេះគឺជាផែនទីបច្ចេកទេសពេញលេញដែលអ្នកត្រូវការ។
អ្វីដែលក្រុមរបស់អ្នកនឹងជំនាញ:
អ្នកនឹងរៀនពីរបៀបសាងសង់និងរៀបចំរចនាសម្ព័ន្ធកម្មវិធី Angular ដោយប្រើម៉ូឌុល សមាសភាគ និងសេវាកម្ម។ អ្នកនឹងពូកែខាង template-driven និង reactive forms អនុវត្តការកំណត់ផ្លូវស្មុគស្មាញជាមួយ guards និង resolvers និងគ្រប់គ្រងស្ថានភាពកម្មវិធីជាមួយ NgRx។ វគ្គសិក្សាក៏គ្របដណ្តប់លើការបង្កើនប្រសិទ្ធភាព ការធ្វើតេស្តឯកតានិង end-to-end និងការដាក់ឱ្យប្រើប្រាស់ production builds។ ប្រធានបទកម្រិតខ្ពស់រួមមាន Angular Universal សម្រាប់ការបង្ហាញផ្នែកម៉ាស៊ីនបម្រើ ស្ថាបត្យកម្ម micro-frontend ជាមួយ Module Federation និងការកំណត់រចនាសម្ព័ន្ធ Progressive Web App។ នៅចុងបញ្ចប់ អ្នកនឹងមានជំនាញក្នុងការកសាង ធ្វើតេស្ត និងដាក់ឱ្យប្រើប្រាស់កម្មវិធី Angular ដែលអាចពង្រីកបាន។
របៀបដែលក្រុមរបស់អ្នកសិក្សាប្រកបដោយប្រសិទ្ធភាព វគ្គសិក្សាអភិវឌ្ឍន៍ Front-end ជាមួយ Angular
របៀបដែលក្រុមរបស់អ្នកអនុវត្ត វគ្គសិក្សាអភិវឌ្ឍន៍ Front-end ជាមួយ Angular
អ្នកជំនាញពីក្រុមហ៊ុនទាំងនេះកំពុងសិក្សានៅ Dedika
មាតិកាវគ្គសិក្សា
8 ជំពូក • 40 មេរៀនរយៈពេលចន្លោះ 4 និង 360 ម៉ោង (អ្នកជ្រើសរើស)
ជំពូក 1លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតមូលដ្ឋានគ្រឹះ Angular និងការរៀបចំបរិយាកាសការងារ
មូលដ្ឋានគ្រឹះ Angular និងការរៀបចំបរិយាកាសការងារ
មេរៀន 1 • ម៉ូឌុល Angular និងការចាប់ផ្ដើមកម្មវិធី
ពន្យល់ពី NgModules, root AppModule និងរបៀបដែល Angular ចាប់ផ្ដើមកម្មវិធី។ ផ្តល់នូវបរិបទរចនាសម្ព័ន្ធដែលត្រូវការមុនពេលបង្កើត components។
មេរៀន 2 • ចំណុចសំខាន់ TypeScript សម្រាប់ Angular
ណែនាំប្រភេទ TypeScript, interfaces និង decorators ដែលត្រូវការដើម្បីសរសេរកូដ Angular ប្រកបដោយទំនុកចិត្ត។ ភ្ជាប់ចំណេះដឹង JavaScript ទៅប្រព័ន្ធអេកូឡូស៊ីដែលមានប្រភេទរបស់ Angular។
មេរៀន 3 • សេចក្តីណែនាំអំពី Angular Framework
គ្របដណ្តប់តួនាទីរបស់ Angular ក្នុង ការអភិវឌ្ឍន៍ front-end ទំនើប និងស្ថាបត្យកម្មដែលបានបំផុសគំនិតពី MVC។ កំណត់មូលដ្ឋានគ្រឹះនៃគោលគំនិតសម្រាប់ប្រធានបទ framework ជាបន្តបន្ទាប់ទាំងអស់។
មេរៀន 4 • ការរៀបចំបរិយាកាសអភិវឌ្ឍន៍
ដំឡើង និងកំណត់រចនាសម្ព័ន្ធ Node.js, npm និង Angular CLI។ ធានាថាអ្នកចូលរួមគ្រប់រូបមានកន្លែងធ្វើការក្នុងស្រុកដែលស្របគ្នា និងអាចផលិតឡើងវិញបាន។
មេរៀន 5 • ការបង្កើតគម្រោង Angular ដំបូងរបស់អ្នក
ប្រើ Angular CLI ដើម្បីបង្កើតគម្រោងថ្មី និងស្វែងយល់ពីរចនាសម្ព័ន្ធឯកសារដែលបានបង្កើត។ ភ្ជាប់ការរៀបចំបរិយាកាសការងារទៅនឹងការបង្កើតគម្រោងជាក់ស្តែង។
ជំពូក 2លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតComponents, Templates និង Data Binding
Components, Templates និង Data Binding
មេរៀន 1 • Built-in Structural Directives
អនុវត្ត *ngIf, *ngFor និង *ngSwitch ដើម្បីគ្រប់គ្រងរចនាសម្ព័ន្ធ DOM យ៉ាងស្វាហាប់។ បង្ហាញពីរបៀបដែល directives ពង្រីកសមត្ថភាពបញ្ចេញមតិរបស់ template។
មេរៀន 2 • Property និង Event Binding
បង្រៀនលំហូរទិន្នន័យមួយផ្លូវតាមរយៈ property binding និងការគ្រប់គ្រងព្រឹត្តិការណ៍អ្នកប្រើប្រាស់តាមរយៈ event binding។ ភ្ជាប់តក្កវិជ្ជា component ទៅកាន់ធាតុ DOM និងអន្តរកម្មអ្នកប្រើប្រាស់។
មេរៀន 3 • វាក្យសម្ព័ន្ធ Template និងកន្សោម
គ្របដណ្តប់ភាសាកន្សោម template របស់ Angular, safe navigation និង template reference variables។ អនុញ្ញាតឱ្យដំណើរការបង្ហាញមាតិកាប្រកបដោយភាពស្វាហាប់ក្នុង component views។
មេរៀន 4 • Component Lifecycle Hooks
ស្វែងយល់ពីលំដាប់ lifecycle hook ពេញលេញពី ngOnInit ដល់ ngOnDestroy។ បង្រៀនថាពេលណា និងមូលហេតុដែលត្រូវប្រើ hook នីមួយៗសម្រាប់ការចាប់ផ្ដើម និងការសម្អាត។
មេរៀន 5 • រចនាសម្ព័ន្ធនៃ Angular Component
បំបែក @Component decorator, metadata properties និង lifecycle របស់ component។ បង្កើតប្លុកអគារសម្រាប់រាល់ធាតុ UI របស់ Angular។
ជំពូក 3លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតការទំនាក់ទំនង Component និង Directives
ការទំនាក់ទំនង Component និង Directives
មេរៀន 1 • ViewChild និង ContentChild Queries
ចូលប្រើឧទាហរណ៍ child component និងមាតិកាដែលបានព្យាករតាមកម្មវិធីតាមរយៈ queries។ អនុញ្ញាតឱ្យមានការសម្របសម្រួល component កម្រិតខ្ពស់លើសពី template binding។
មេរៀន 2 • ការទំនាក់ទំនង Parent-to-Child ជាមួយ @Input
ប្រើ @Input ដើម្បីបញ្ជូនទិន្នន័យចុះតាមមែកធាង component និងធ្វើសុពលភាព input ជាមួយ setters។ បង្កើតគំរូលំហូរទិន្នន័យចុះក្រោមដ៏សំខាន់នៅក្នុង Angular។
មេរៀន 3 • ការបង្កើត Custom Structural Directives
អនុវត្ត structural directives ដោយប្រើ TemplateRef និង ViewContainerRef ដើម្បីរៀបចំ DOM។ ពង្រីកសមត្ថភាពរបស់អ្នកចូលរួមក្នុងការបង្កើតតក្កវិជ្ជាប្លង់ដែលអាចប្រើឡើងវិញបាន។
មេរៀន 4 • ការបង្កើត Custom Attribute Directives
បង្កើត directives ដែលកែប្រែរូបរាង ឬឥរិយាបថរបស់ host element ដោយមិនផ្លាស់ប្តូររចនាសម្ព័ន្ធ DOM។ ពង្រឹងគំរូ directive ដែលបានណែនាំក្នុងជំពូកទី 2។
មេរៀន 5 • ការទំនាក់ទំនង Child-to-Parent ជាមួយ @Output
ប្រើ @Output និង EventEmitter ដើម្បីបញ្ចេញព្រឹត្តិការណ៍ផ្ទាល់ខ្លួនឡើងតាមមែកធាង component។ បំពេញគំរូទំនាក់ទំនង parent-child ពីរផ្លូវ។
ជំពូក 4លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតServices, Dependency Injection និង HTTP
Services, Dependency Injection និង HTTP
មេរៀន 1 • ការបង្កើត និងផ្តល់ Angular Services
បង្កើត services ជាមួយ CLI និងចុះឈ្មោះពួកវានៅកម្រិត module, component ឬ root។ បង្កើតស្រទាប់ service ជាកន្លែងសម្រាប់តក្កវិជ្ជាដែលបានចែករំលែក។
មេរៀន 2 • HTTP Client និង REST API Integration
កំណត់រចនាសម្ព័ន្ធ HttpClientModule និងអនុវត្តសំណើ GET, POST, PUT និង DELETE។ ភ្ជាប់ស្រទាប់ service ទៅកាន់ប្រភពទិន្នន័យ back-end ពិតប្រាកដ។
មេរៀន 3 • ការគ្រប់គ្រងកំហុស និង HTTP Interceptors
អនុវត្តការគ្រប់គ្រងកំហុសសកលជាមួយ catchError និងការបំប្លែងសំណើ/ការឆ្លើយតបជាមួយ interceptors។ ផលិតគំរូទំនាក់ទំនង HTTP ដែលត្រៀមសម្រាប់ផលិតកម្ម។
មេរៀន 4 • ការស្វែងយល់ស៊ីជម្រៅអំពី Dependency Injection
ស្វែងយល់ពីឋានានុក្រម DI, injection tokens និងប្រភេទ provider។ អនុញ្ញាតឱ្យមានការគ្រប់គ្រងច្បាស់លាស់អំពីរបៀបដែល dependencies ត្រូវបានដោះស្រាយនៅទូទាំងកម្មវិធី។
មេរៀន 5 • សេចក្តីណែនាំអំពី RxJS Observables
ណែនាំ Observables, Subjects និង operators ស្នូលដែលត្រូវការដើម្បីធ្វើការជាមួយ APIs អសមកាលរបស់ Angular។ រៀបចំអ្នកចូលរួមសម្រាប់គំរូ HTTP និងការគ្រប់គ្រងព្រឹត្តិការណ៍ដែលមានប្រតិកម្ម។
ជំពូក 5លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតAngular Routing និង Navigation
Angular Routing និង Navigation
មេរៀន 1 • Route Guards និង Access Control
អនុវត្ត CanActivate, CanDeactivate និង CanLoad guards ដើម្បីការពារ routes។ រួមបញ្ចូលការផ្ទៀងផ្ទាត់ភាពត្រឹមត្រូវ និងការអនុញ្ញាតទៅក្នុងស្រទាប់នាវាចរណ៍។
មេរៀន 2 • Lazy Loading និង Route Resolvers
បំបែកកម្មវិធីទៅជា feature modules ដែលផ្ទុកតាមតម្រូវការ និងទាញយកទិន្នន័យជាមុនជាមួយ resolvers។ ធ្វើឱ្យប្រសើរឡើងនូវដំណើរការផ្ទុកដំបូង និងបទពិសោធន៍អ្នកប្រើប្រាស់។
មេរៀន 3 • Nested Routes និង Named Outlets
រៀបចំរចនាសម្ព័ន្ធ child routes នៅក្រោម parent routes និងប្រើ named outlets សម្រាប់ views ជំនួយ។ គាំទ្រតម្រូវការប្លង់ស្មុគស្មាញក្នុងកម្មវិធីធំ។
មេរៀន 4 • ការរៀបចំ Router និងនាវាចរណ៍មូលដ្ឋាន
កំណត់រចនាសម្ព័ន្ធ RouterModule ជាមួយនិយមន័យ route និងបន្ថែម router-outlet និង routerLink។ បង្កើតមូលដ្ឋានគ្រឹះសម្រាប់មុខងារនាវាចរណ៍ទាំងអស់។
មេរៀន 5 • Route Parameters និង Query Strings
អានផ្នែក route ថាមវន្ត និងប៉ារ៉ាម៉ែត្រ query ស្រេចចិត្តពី ActivatedRoute។ អនុញ្ញាតឱ្យមាន views លម្អិត និងទំព័របញ្ជីដែលបានត្រង។
ជំពូក 6លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតAngular Forms: Template-Driven និង Reactive
Angular Forms: Template-Driven និង Reactive
មេរៀន 1 • Dynamic Forms ជាមួយ FormArray
ប្រើ FormArray ដើម្បីបន្ថែម និងលុបការគ្រប់គ្រងទម្រង់នៅពេលដំណើរការសម្រាប់ទិន្នន័យដែលមានប្រវែងអថេរ។ គ្រប់គ្រងសេណារីយ៉ូក្នុងពិភពពិតដូចជាធាតុបន្ទាត់ដដែលៗ។
មេរៀន 2 • Validators និង Custom Validation
អនុវត្ត validators សមកាលកម្ម និងអសមកាល និងបង្កើតអនុគមន៍ validator ផ្ទាល់ខ្លួនដែលអាចប្រើឡើងវិញបាន។ ធានានូវភាពត្រឹមត្រូវនៃទិន្នន័យមុនពេលដាក់ស្នើ។
មេរៀន 3 • ការដាក់ស្នើទម្រង់ និងការគ្រប់គ្រង State
គ្រប់គ្រងការដាក់ស្នើទម្រង់, កំណត់ឡើងវិញ និងស្ថានភាព dirty/touched ដើម្បីផ្តល់ UX ដែលត្រូវបានកែលម្អ។ ភ្ជាប់ទិន្នន័យទម្រង់ទៅការហៅ service ដែលបានណែនាំក្នុងជំពូកទី 4។
មេរៀន 4 • Template-Driven Forms
ប្រើ ngForm, ngModel និង built-in validators ដើម្បីបង្កើតទម្រង់តាមបែបប្រកាសក្នុង template។ ណែនាំគោលគំនិតទម្រង់ជាមួយនឹងការចំណាយ TypeScript តិចតួច។
មេរៀន 5 • មូលដ្ឋានគ្រឹះ Reactive Forms
បង្កើតទម្រង់តាមកម្មវិធីជាមួយ FormControl, FormGroup និង ReactiveFormsModule។ ផ្តល់នូវការគ្រប់គ្រងច្បាស់លាស់ និងអាចសាកល្បងបានលើស្ថានភាពទម្រង់ និងសុពលភាព។
ជំពូក 7លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតState Management និង Reactive Patterns
State Management និង Reactive Patterns
មេរៀន 1 • NgRx Entity និង DevTools
សម្រួលការគ្រប់គ្រងបណ្តុំជាមួយ NgRx Entity និងត្រួតពិនិត្យស្ថានភាពជាមួយ Redux DevTools។ ពន្លឿនការអភិវឌ្ឍន៍ និង ការស្វែងរកនិងកែកំហុស នៃមុខងារដែលផ្តោតលើ store។
មេរៀន 2 • សេចក្តីណែនាំអំពី NgRx Store
ដំឡើង NgRx និងកំណត់ actions, reducers និង store សម្រាប់ផ្នែកមុខងារមួយ។ បង្កើតគំរូ Redux នៅក្នុងប្រព័ន្ធអេកូឡូស៊ី Angular។
មេរៀន 3 • Service-Based State ជាមួយ BehaviorSubject
រក្សាទុក និងចែករំលែកស្ថានភាពនៅទូទាំង components ដោយប្រើ BehaviorSubject ក្នុង service មួយ។ ផ្តល់នូវដំណោះស្រាយស្ថានភាពទម្ងន់ស្រាល មុនពេលណែនាំ NgRx។
មេរៀន 4 • NgRx Effects for Side Effects
គ្រប់គ្រងប្រតិបត្តិការអសមកាលដូចជាការហៅ HTTP នៅខាងក្រៅ reducers ដោយប្រើ NgRx Effects។ រក្សា reducers ឱ្យសុទ្ធ និងប្រមូលផ្តុំតក្កវិជ្ជា side-effect។
មេរៀន 5 • Selectors និង Component Integration
បង្កើត selectors ដែលបានចងចាំ និងចែកចាយ actions ពី components តាមរយៈ Store service។ ភ្ជាប់ NgRx store ទៅកាន់ស្រទាប់ component។
ជំពូក 8លាក់លាក់ព័ត៌មានលម្អិតមើលព័ត៌មានលម្អិតដំណើរការ, ការធ្វើតេស្ត និង ការដាក់ឱ្យប្រើប្រាស់
ដំណើរការ, ការធ្វើតេស្ត និង ការដាក់ឱ្យប្រើប្រាស់
មេរៀន 1 • យុទ្ធសាស្ត្រ ការដាក់ឱ្យប្រើប្រាស់ និង CI/CD Integration
ដាក់ឱ្យប្រើប្រាស់ Angular builds ទៅ static hosting និងរួមបញ្ចូល pipelines ស្វ័យប្រវត្តិសម្រាប់ការចែកចាយបន្ត។ បិទវដ្តជីវិតអភិវឌ្ឍន៍ពីកូដទៅផលិតកម្ម។
មេរៀន 2 • Unit Testing Components និង Services
សរសេរ ការធ្វើតេស្តឯកតា ជាមួយ Jasmine និង TestBed សម្រាប់ components, services និង pipes។ ធ្វើសុពលភាពឯកតានីមួយៗដោយឯកោ មុនពេលរួមបញ្ចូល។
មេរៀន 3 • Bundle Optimization និង Build Configuration
កំណត់រចនាសម្ព័ន្ធ production builds, tree shaking និង differential loading សម្រាប់ទំហំ bundle ល្អបំផុត។ រៀបចំកម្មវិធីសម្រាប់ឧបសគ្គនៃ ការដាក់ឱ្យប្រើប្រាស់ ក្នុងពិភពពិត។
មេរៀន 4 • End-to-End Testing ជាមួយ Cypress
ធ្វើស្វ័យប្រវត្តិកម្ម ការធ្វើតេស្តលំហូរអ្នកប្រើប្រាស់ជាមួយ Cypress ដើម្បីធ្វើសុពលភាពឥរិយាបថកម្មវិធីពេញលេញ។ បំពេញបន្ថែម ការធ្វើតេស្តឯកតា ជាមួយសេណារីយ៉ូដែលផ្អែកលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតជាក់ស្តែង។
មេរៀន 5 • ការរកឃើញការផ្លាស់ប្តូរ និងការបង្កើនប្រសិទ្ធភាពដំណើរការ
ពន្យល់ពីយុទ្ធសាស្ត្រការរកឃើញការផ្លាស់ប្តូរលំនាំដើម និង OnPush របស់ Angular និងឧបករណ៍វិភាគប្រូហ្វាល។ កាត់បន្ថយការបង្ហាញឡើងវិញដែលមិនចាំបាច់នៅក្នុងមែកធាង component ធំ។
វិញ្ញាបនបត្រដែលមានសុពលភាពសម្រាប់ការបញ្ចប់
វគ្គសិក្សានេះសម្រាប់អ្នក៖
អ្នកអភិវឌ្ឍន៍ JavaScript៖ ត្រៀមខ្លួនប្រើប្រាស់ក្របខ័ណ្ឌ front-end កម្រិតសហគ្រាសដែលមានរចនាសម្ព័ន្ធ។
អ្នកអភិវឌ្ឍន៍ React ឬ Vue៖ ចង់បន្ថែមជំនាញ Angular ទៅក្នុងឧបករណ៍វិជ្ជាជីវៈរបស់ពួកគេ។
អ្នកអភិវឌ្ឍន៍ផ្នែកខាងក្រោយ៖ ពង្រីកទៅតួនាទី full-stack ដែលតម្រូវឱ្យមានជំនាញ front-end ទំនើប។
និស្សិតបញ្ចប់ការសិក្សាផ្នែកវិទ្យាសាស្ត្រកុំព្យូទ័រ៖ ភ្ជាប់ចំណេះដឹងសិក្សាជាមួយការអភិវឌ្ឍន៍ Angular ស្តង់ដារឧស្សាហកម្ម។
អ្នកអភិវឌ្ឍន៍គេហទំព័រឯករាជ្យ៖ មានគោលដៅមានលក្ខណៈសម្បត្តិគ្រប់គ្រាន់សម្រាប់គម្រោងអតិថិជនធំ និងស្មុគស្មាញជាងមុន។
អ្នកផ្លាស់ប្តូរអាជីព៖ កសាងជំនាញ front-end ដែលត្រៀមការងារពីមូលដ្ឋានគ្រឹះកម្មវិធីរឹងមាំ។
វគ្គសិក្សាដែលពាក់ព័ន្ធ
សំណួរញឹកញាប់
Dedika ជាអ្វី?
តើវិញ្ញាបនបត្រមានសុពលភាព នៅប្រទេសកម្ពុជា ដែរឬទេ?
វគ្គសិក្សាឥតគិតថ្លៃឬទេ?
ម៉ោងសិក្សារបស់វគ្គសិក្សាជាអ្វី?
វគ្គសិក្សាមានលក្ខណៈដូចម្តេច?
វគ្គសិក្សាដំណើរការយ៉ាងដូចម្តេច?
រយៈពេលវគ្គសិក្សាជាអ្វី?
តម្លៃឬថ្លៃវគ្គសិក្សាជាអ្វី?
វគ្គសិក្សា EAD ឬវគ្គអនឡាញជាអ្វី ហើយវាដំណើរការយ៉ាងដូចម្តេច?
វគ្គសិក្សា PDF