Angular Front-end fejlesztő tanfolyam

1. óra • Angular modulok és alkalmazásindítás

Elmagyarázza az NgModule-okat, a gyökér AppModule-t és azt, hogy az Angular hogyan indítja el az alkalmazást. Megadja a komponensek építése előtt szükséges strukturális kontextust.

2. óra • TypeScript alapok az Angularhoz

Bemutatja a TypeScript típusokat, interfészeket és dekorátorokat, amelyek szükségesek az Angular-kód magabiztos írásához. Áthidalja a JavaScript-ismereteket az Angular típusos ökoszisztémájába.

3. óra • Bevezetés az Angular keretrendszerbe

Leírja az Angular szerepét a modern front-end fejlesztésben és az MVC által ihletett architektúráját. Beállítja a fogalmi alapot az összes további keretrendszer-témához.

4. óra • A fejlesztői környezet beállítása

Telepíti és konfigurálja a Node.js-t, az npm-et és az Angular CLI-t. Biztosítja, hogy minden hallgatónak egységes, reprodukálható helyi munkaterülete legyen.

1. óra • Beépített strukturális direktívák

Az *ngIf, *ngFor és *ngSwitch alkalmazása a DOM-struktúra dinamikus vezérlésére. Bemutatja, hogy a direktívák hogyan bővítik a sablon kifejezőképességét.

2. óra • Tulajdonság- és eseménykötés

Megtanítja az egyirányú adatáramlást a tulajdonságkötésen keresztül és a felhasználói események kezelését az eseménykötésen keresztül. Összeköti a komponens logikáját a DOM-elemekkel és a felhasználói interakciókkal.

3. óra • Sablonszintaxis és kifejezések

Leírja az Angular sablonkifejezési nyelvét, a biztonságos navigációt és a sablonreferencia-változókat. Lehetővé teszi a dinamikus tartalom megjelenítését a komponens nézetein belül.

4. óra • Komponens életciklus-horgok

Feltárja a teljes életciklus-horog sorozatot az ngOnInit-től az ngOnDestroy-ig. Megtanítja, hogy mikor és miért kell használni az egyes horgokat inicializáláshoz és takarításhoz.

1. óra • ViewChild és ContentChild lekérdezések

Gyermek komponenspéldányok és vetített tartalom programozott elérése lekérdezéseken keresztül. Lehetővé teszi a fejlett komponens-összehangolást a sablonkötésen túl.

2. óra • Szülő-gyermek kommunikáció a @Input segítségével

A @Input használatával adatokat ad át a komponensfában lefelé, és bemeneti adatokat érvényesít setterekkel. Létrehozza az elsődleges lefelé irányuló adatáramlási mintát az Angularban.

3. óra • Egyedi strukturális direktívák építése

Strukturális direktívák megvalósítása a TemplateRef és a ViewContainerRef segítségével a DOM manipulálására. Kibővíti a hallgatók képességét újrafelhasználható elrendezési logika létrehozására.

4. óra • Egyedi attribútumdirektívák építése

Olyan direktívákat hoz létre, amelyek módosítják a gazdaelem megjelenését vagy viselkedését anélkül, hogy megváltoztatnák a DOM-szerkezetet. Megerősíti a 2. fejezetben bemutatott direktíva mintát.

1. óra • Angular szolgáltatások létrehozása és biztosítása

Szolgáltatásokat generál a CLI segítségével, és regisztrálja őket modul-, komponens- vagy gyökérszinten. Létrehozza a szolgáltatási réteget a megosztott logika otthonaként.

2. óra • HTTP kliens és REST API integráció

Konfigurálja a HttpClientModule-t, és GET, POST, PUT és DELETE kéréseket hajt végre. Összeköti a szolgáltatási réteget a valós háttéradatforrásokkal.

3. óra • Hibakezelés és HTTP elfogók

Globális hibakezelést valósít meg a catchError segítségével, valamint kérés/válasz átalakítást az elfogók segítségével. Termelésre kész HTTP kommunikációs mintákat hoz létre.

4. óra • Függőség-befecskendezés mélyrehatóan

Feltárja a DI hierarchiát, a befecskendezési tokeneket és a szolgáltatók típusait. Lehetővé teszi a finomhangolt vezérlést a függőségek feloldása felett az alkalmazásban.

1. óra • Útvonalvédelmek és hozzáférés-vezérlés

CanActivate, CanDeactivate és CanLoad védelmeket valósít meg az útvonalak védelmére. Integrálja a hitelesítést és a jogosultságkezelést a navigációs rétegbe.

2. óra • Lusta betöltés és útvonal-feloldók

Az alkalmazást igény szerint betöltött funkciómodulokra bontja, és előre lekéri az adatokat feloldókkal. Javítja a kezdeti betöltési teljesítményt és a felhasználói élményt.

3. óra • Beágyazott útvonalak és elnevezett kimeneti csatornák

Gyermek útvonalakat strukturál szülő útvonalak alatt, és elnevezett kimeneti csatornákat használ segédnézetekhez. Támogatja az összetett elrendezési követelményeket a nagy alkalmazásokban.

4. óra • Router beállítás és alapvető navigáció

Konfigurálja a RouterModule-t útvonaldefiníciókkal, és hozzáadja a router-outlet és routerLink elemeket. Létrehozza az alapot az összes navigációs funkcióhoz.

1. óra • Dinamikus űrlapok a FormArray segítségével

A FormArray használatával űrlapvezérlőket ad hozzá és távolít el futásidőben változó hosszúságú adatokhoz. Valós forgatókönyveket kezel, mint például ismétlődő sorok.

2. óra • Érvényesítők és egyedi érvényesítés

Szinkron és aszinkron érvényesítőket alkalmaz, és újrafelhasználható egyedi érvényesítő függvényeket hoz létre. Biztosítja az adatintegritást a beküldés előtt.

3. óra • Űrlap beküldése és állapotkezelés

Kezeli az űrlap beküldését, visszaállítását és a dirty/touched állapotot a kifinomult felhasználói élmény érdekében. Összeköti az űrlapadatokat a 4. fejezetben bemutatott szolgáltatáshívásokkal.

4. óra • Sablonvezérelt űrlapok

Az ngForm, ngModel és beépített érvényesítők használatával deklaratív módon épít űrlapokat a sablonban. Bevezeti az űrlap fogalmakat minimális TypeScript többletterheléssel.

1. óra • NgRx Entity és DevTools

Egyszerűsíti a gyűjteménykezelést az NgRx Entity segítségével, és megvizsgálja az állapotot a Redux DevTools segítségével. Felgyorsítja a tároló-intenzív funkciók fejlesztését és hibakeresését.

2. óra • Bevezetés az NgRx Store-ba

Telepíti az NgRx-t, és meghatározza a műveleteket, reducereket és a tárolót egy funkció szeletéhez. Létrehozza a Redux mintát az Angular ökoszisztémán belül.

3. óra • Szolgáltatásalapú állapot a BehaviorSubject segítségével

Állapotot tárol és oszt meg komponensek között a BehaviorSubject használatával egy szolgáltatásban. Könnyű súlyú állapotmegoldást nyújt az NgRx bevezetése előtt.

4. óra • NgRx Effects mellékhatásokhoz

Aszinkron műveleteket, például HTTP-hívásokat kezel a reducereken kívül az NgRx Effects segítségével. A reducereket tisztán tartja, és központosítja a mellékhatás-logikát.

1. óra • Telepítési stratégiák és CI/CD integráció

Angular build-eket telepít statikus tárolásra, és automatizált pipeline-okat integrál a folyamatos szállításhoz. Lezárja a fejlesztési életciklust a kódtól az éles üzemig.

2. óra • Komponensek és szolgáltatások egységtesztelése

Egységteszteket ír Jasmine és TestBed segítségével komponensekhez, szolgáltatásokhoz és csövekhez. Az egyes egységeket elkülönítve érvényesíti az integráció előtt.

3. óra • Bundle optimalizálás és build konfiguráció

Konfigurálja az éles build-eket, a fa rázást és a differenciális betöltést az optimális bundle méret érdekében. Felkészíti az alkalmazást a valós telepítési korlátozásokra.

4. óra • Végpontok közötti tesztelés Cypress-szel

Automatizálja a felhasználói folyamat tesztelését Cypress segítségével a teljes alkalmazás viselkedésének érvényesítéséhez. Kiegészíti az egységteszteket valósághű böngészőalapú forgatókönyvekkel.