Angular Frontend-utvecklingskurs

Lektion 1 • Angular-moduler och applikationsstart

Förklarar NgModules, roten AppModule och hur Angular startar applikationen. Ger den strukturella kontext som behövs innan komponenter byggs.

Lektion 2 • TypeScript-grunder för Angular

Introducerar TypeScript-typer, gränssnitt och dekoratorer som krävs för att skriva Angular-kod med självförtroende. Överbryggar JavaScript-kunskap till Angulars typade ekosystem.

Lektion 3 • Introduktion till Angular-ramverket

Täcker Angulars roll i modern frontend-utveckling och dess MVC-inspirerade arkitektur. Sätter den konceptuella grunden för alla efterföljande ramverksämnen.

Lektion 4 • Installation av utvecklingsmiljön

Installerar och konfigurerar Node.js, npm och Angular CLI. Säkerställer att varje student har en konsekvent, reproducerbar lokal arbetsyta.

Lektion 1 • Inbyggda strukturdirektiv

Tillämpar *ngIf, *ngFor och *ngSwitch för att dynamiskt styra DOM-strukturen. Visar hur direktiv utökar mallens uttryckskraft.

Lektion 2 • Egenskaps- och händelsebindning

Lär ut envägsdataflöde via egenskapsbindning och användarhändelsehantering via händelsebindning. Kopplar komponentlogik till DOM-element och användarinteraktioner.

Lektion 3 • Mallsyntax och uttryck

Täcker Angulars malluttrycksspråk, säker navigering och mallreferensvariabler. Möjliggör dynamisk innehållsrendering i komponentvyer.

Lektion 4 • Komponentlivscykelkrokar

Utforskar hela livscykelkroksekvensen från ngOnInit till ngOnDestroy. Lär ut när och varför varje krok ska användas för initiering och rensning.

Lektion 1 • ViewChild- och ContentChild-frågor

Kommer åt barnkomponentinstanser och projicerat innehåll programmatiskt via frågor. Möjliggör avancerad komponentkoordination bortom mallbindning.

Lektion 2 • Förälder-till-barn-kommunikation med @Input

Använder @Input för att skicka data nedför komponentträdet och validerar indata med sättare. Etablerar det primära nedåtgående dataflödesmönstret i Angular.

Lektion 3 • Bygga anpassade strukturdirektiv

Implementerar strukturdirektiv med TemplateRef och ViewContainerRef för att manipulera DOM. Utökar studenternas förmåga att skapa återanvändbar layoutlogik.

Lektion 4 • Bygga anpassade attributdirektiv

Skapar direktiv som modifierar värdelementets utseende eller beteende utan att ändra DOM-strukturen. Förstärker det direktivmönster som introducerades i kapitel 2.

Lektion 1 • Skapa och tillhandahålla Angular-tjänster

Genererar tjänster med CLI och registrerar dem på modul-, komponent- eller rotnivå. Etablerar tjänstelagret som hemvist för delad logik.

Lektion 2 • HTTP-klient och REST API-integration

Konfigurerar HttpClientModule och utför GET-, POST-, PUT- och DELETE-förfrågningar. Kopplar tjänstelagret till verkliga backend-datakällor.

Lektion 3 • Felhantering och HTTP-interceptors

Implementerar global felhantering med catchError och förfrågnings-/svarstransformation med interceptors. Producerar produktionsklara HTTP-kommunikationsmönster.

Lektion 4 • Djupdykning i beroendeinjektion

Utforskar DI-hierarkin, injektionstokens och providertyper. Möjliggör finkornig kontroll över hur beroenden löses över appen.

Lektion 1 • Route Guards och åtkomstkontroll

Implementerar CanActivate, CanDeactivate och CanLoad guards för att skydda routes. Integrerar autentisering och auktorisering i navigationslagret.

Lektion 2 • Lazy Loading och route resolvers

Delar upp appen i funktionsmoduler som laddas vid behov och förhämtar data med resolvers. Förbättrar initial laddningstid och användarupplevelse.

Lektion 3 • Nästlade routes och namngivna outlets

Strukturerar barnroutes under föräldraroutes och använder namngivna outlets för hjälpvyer. Stöder komplexa layoutkrav i stora applikationer.

Lektion 4 • Routerinstallation och grundläggande navigering

Konfigurerar RouterModule med ruttdefinitioner och lägger till router-outlet och routerLink. Etablerar grunden för alla navigeringsfunktioner.

Lektion 1 • Dynamiska formulär med FormArray

Använder FormArray för att lägga till och ta bort formulärkontroller vid körning för data med variabel längd. Hanterar verkliga scenarier som upprepade radobjekt.

Lektion 2 • Validerare och anpassad validering

Tillämpar synkrona och asynkrona validerare och skapar återanvändbara anpassade valideringsfunktioner. Säkerställer dataintegritet före inskickning.

Lektion 3 • Formulärinskickning och tillståndshantering

Hanterar formulärinskickning, återställning och dirty/touched-tillstånd för att leverera polerad UX. Kopplar formulärdata till serviceanrop som introducerades i kapitel 4.

Lektion 4 • Malldrivna formulär

Använder ngForm, ngModel och inbyggda validerare för att deklarativt bygga formulär i mallen. Introducerar formulärkoncept med minimal TypeScript-overhead.

Lektion 1 • NgRx Entity och DevTools

Förenklar samlingshantering med NgRx Entity och inspekterar tillstånd med Redux DevTools. Accelererar utveckling och felsökning av lagringsintensiva funktioner.

Lektion 2 • Introduktion till NgRx Store

Installerar NgRx och definierar actions, reducers och store för en funktionsdel. Etablerar Redux-mönstret inom Angular-ekosystemet.

Lektion 3 • Tjänstebaserat tillstånd med BehaviorSubject

Lagrar och delar tillstånd över komponenter med BehaviorSubject i en tjänst. Ger en lättviktig tillståndslösning innan NgRx introduceras.

Lektion 4 • NgRx Effects för sidoeffekter

Hanterar asynkrona operationer som HTTP-anrop utanför reducers med NgRx Effects. Håller reducers rena och centraliserar sidoeffektslogik.

Lektion 1 • Driftsättningsstrategier och CI/CD-integration

Driftsätter Angular-byggen till statisk hosting och integrerar automatiserade pipelines för kontinuerlig leverans. Stänger utvecklingslivscykeln från kod till produktion.

Lektion 2 • Enhetstestning av komponenter och tjänster

Skriver enhetstester med Jasmine och TestBed för komponenter, tjänster och pipes. Validerar enskilda enheter isolerat före integration.

Lektion 3 • Paketoptimering och byggkonfiguration

Konfigurerar produktionsbyggen, tree shaking och differentiell laddning för optimal paketstorlek. Förbereder appen för verkliga driftsättningsbegränsningar.

Lektion 4 • End-to-end-testning med Cypress

Automatiserar användarflödestestning med Cypress för att validera fullständigt applikationsbeteende. Kompletterar enhetstester med realistiska webbläsarbaserade scenarier.