Kurso sa Angular Front-end Development

Aralin 1 • Mga Angular Module at Pag-bootstrap ng Application

Ipinapaliwanag ang mga NgModule, ang root AppModule, at kung paano binobootstraps ng Angular ang application. Nagbibigay ng kontekstong istruktural na kailangan bago bumuo ng mga component.

Aralin 2 • TypeScript Essentials para sa Angular

Ipinapakilala ang mga uri, interface, at decorator ng TypeScript na kinakailangan para magsulat ng Angular code nang may kumpiyansa. Tinutulay ang kaalaman sa JavaScript patungo sa typed ecosystem ng Angular.

Aralin 3 • Panimula sa Angular Framework

Sumasaklaw sa papel ng Angular sa modernong front-end development at sa arkitekturang hango sa MVC nito. Itinatakda ang konseptwal na baseline para sa lahat ng kasunod na paksa ng framework.

Aralin 4 • Pag-setup ng Development Environment

Ini-install at kino-configure ang Node.js, npm, at ang Angular CLI. Tinitiyak na ang bawat mag-aaral ay may pare-pareho at maaaring kopyahing lokal na workspace.

Aralin 1 • Mga Built-in na Structural Directive

Inilalapat ang *ngIf, *ngFor, at *ngSwitch upang kontrolin ang istruktura ng DOM nang dynamic. Ipinapakita kung paano pinalalawak ng mga directive ang pagpapahayag ng template.

Aralin 2 • Property at Event Binding

Itinuturo ang isang-daan na daloy ng datos sa pamamagitan ng property binding at paghawak ng event ng gumagamit sa pamamagitan ng event binding. Ikinokonekta ang lohika ng component sa mga elemento ng DOM at mga interaksyon ng gumagamit.

Aralin 3 • Template Syntax at mga Expression

Sumasaklaw sa wika ng template expression ng Angular, safe navigation, at mga variable ng template reference. Nagbibigay-daan sa dynamic na pag-render ng nilalaman sa loob ng mga view ng component.

Aralin 4 • Mga Component Lifecycle Hook

Tinutuklas ang buong pagkakasunod-sunod ng lifecycle hook mula sa ngOnInit hanggang sa ngOnDestroy. Itinuturo kung kailan at bakit gagamitin ang bawat hook para sa inisyalisasyon at paglilinis.

Aralin 1 • ViewChild at ContentChild Queries

Ina-access ang mga instance ng child component at projected content nang programmatically sa pamamagitan ng mga query. Nagbibigay-daan sa advanced na koordinasyon ng component na lampas sa template binding.

Aralin 2 • Komunikasyon ng Magulang-papunta-sa-Anak gamit ang @Input

Ginagamit ang @Input upang maipasa ang datos pababa sa puno ng component at balidahin ang input gamit ang mga setter. Itinatatag ang pangunahing pababang daloy-ng-datos na pattern sa Angular.

Aralin 3 • Pagbuo ng mga Custom Structural Directive

Ipinapatupad ang mga structural directive gamit ang TemplateRef at ViewContainerRef upang manipulahin ang DOM. Pinalalawak ang kakayahan ng mga mag-aaral na lumikha ng magagamit muli na lohika ng layout.

Aralin 4 • Pagbuo ng mga Custom Attribute Directive

Lumilikha ng mga directive na nagbabago sa hitsura o pag-uugali ng host element nang hindi binabago ang istruktura ng DOM. Pinatatatag ang pattern ng directive na ipinakilala sa Kabanata 2.

Aralin 1 • Paglikha at Pagbibigay ng mga Serbisyo ng Angular

Bumubuo ng mga serbisyo gamit ang CLI at irerehistro ang mga ito sa saklaw ng module, component, o root. Itinatatag ang service layer bilang tahanan para sa shared logic.

Aralin 2 • HTTP Client at REST API Integration

Kino-configure ang HttpClientModule at isinasagawa ang mga GET, POST, PUT, at DELETE na kahilingan. Ikinokonekta ang service layer sa mga tunay na pinagmumulan ng datos sa back-end.

Aralin 3 • Error Handling at mga HTTP Interceptor

Ipinapatupad ang global error handling gamit ang catchError at pagbabago ng request/response gamit ang mga interceptor. Gumagawa ng mga pattern ng HTTP communication na handa sa produksyon.

Aralin 4 • Malalim na Pagtingin sa Dependency Injection

Tinutuklas ang hierarchy ng DI, mga injection token, at mga uri ng provider. Nagbibigay-daan sa fine-grained na kontrol sa kung paano nalulutas ang mga dependency sa buong app.

Aralin 1 • Mga Route Guard at Access Control

Ipinapatupad ang mga CanActivate, CanDeactivate, at CanLoad guard upang protektahan ang mga ruta. Isinasama ang authentication at authorization sa layer ng nabigasyon.

Aralin 2 • Lazy Loading at mga Route Resolver

Hinahati ang app sa mga feature module na nilo-load on demand at paunang kinukuha ang datos gamit ang mga resolver. Pinabubuti ang pagganap ng paunang pag-load at karanasan ng gumagamit.

Aralin 3 • Mga Nested na Ruta at Named Outlet

Bumubuo ng mga child route sa ilalim ng mga parent route at gumagamit ng mga named outlet para sa mga auxiliary na view. Sumusuporta sa mga kumplikadong kinakailangan sa layout sa malalaking application.

Aralin 4 • Router Setup at Basic Navigation

Kino-configure ang RouterModule na may mga kahulugan ng ruta at idinaragdag ang router-outlet at routerLink. Itinatatag ang pundasyon para sa lahat ng tampok ng nabigasyon.

Aralin 1 • Mga Dynamic na Form gamit ang FormArray

Ginagamit ang FormArray upang magdagdag at mag-alis ng mga kontrol ng form sa runtime para sa datos na may variable na haba. Pinangangasiwaan ang mga real-world na senaryo tulad ng mga umuulit na line item.

Aralin 2 • Mga Validator at Custom Validation

Naglalapat ng mga synchronous at asynchronous na validator at lumilikha ng mga magagamit muli na custom validator function. Tinitiyak ang integridad ng datos bago isumite.

Aralin 3 • Pagsusumite ng Form at State Management

Pinapangasiwaan ang pagsusumite, pag-reset ng form, at ang estado ng dirty/touched upang maghatid ng pinakintab na UX. Ikinokonekta ang datos ng form sa mga service call na ipinakilala sa Kabanata 4.

Aralin 4 • Mga Template-Driven na Form

Ginagamit ang ngForm, ngModel, at mga built-in na validator upang buuin ang mga form nang declarative sa template. Ipinapakilala ang mga konsepto ng form na may kaunting overhead ng TypeScript.

Aralin 1 • NgRx Entity at DevTools

Pinasimple ang pamamahala ng koleksyon gamit ang NgRx Entity at sinisiyasat ang estado gamit ang Redux DevTools. Pinapabilis ang pag-develop at pag-debug ng mga tampok na mabigat sa store.

Aralin 2 • Panimula sa NgRx Store

Ini-install ang NgRx at tinutukoy ang mga action, reducer, at ang store para sa isang feature slice. Itinatatag ang pattern ng Redux sa loob ng ecosystem ng Angular.

Aralin 3 • Estado na Batay sa Serbisyo gamit ang BehaviorSubject

Nag-iimbak at nagbabahagi ng estado sa mga component gamit ang BehaviorSubject sa isang serbisyo. Nagbibigay ng magaan na solusyon ng estado bago ipakilala ang NgRx.

Aralin 4 • NgRx Effects para sa mga Side Effect

Pinapangasiwaan ang mga async na operasyon tulad ng mga HTTP call sa labas ng mga reducer gamit ang NgRx Effects. Pinapanatiling puro ang mga reducer at isinasentralisa ang lohika ng side-effect.

Aralin 1 • Mga Istratehiya ng Deployment at CI/CD Integration

Nagde-deploy ng mga Angular build sa static hosting at isinasama ang mga automated pipeline para sa tuluy-tuloy na paghahatid. Isinasara ang siklo ng buhay ng development mula sa code hanggang sa produksyon.

Aralin 2 • Unit Testing ng mga Component at Serbisyo

Sumusulat ng mga unit test gamit ang Jasmine at TestBed para sa mga component, serbisyo, at pipe. Binabalida ang mga indibidwal na yunit sa paghihiwalay bago ang integrasyon.

Aralin 3 • Pag-optimize ng Bundle at Build Configuration

Kino-configure ang mga production build, tree shaking, at differential loading para sa pinakamainam na laki ng bundle. Inihahanda ang app para sa mga hadlang sa deployment sa real-world.

Aralin 4 • End-to-End na Pagsubok gamit ang Cypress

Ina-automate ang pagsubok ng daloy ng gumagamit gamit ang Cypress upang balidahin ang buong pag-uugali ng application. Pinupunan ang mga unit test ng makatotohanang mga senaryo na batay sa browser.