LUMIFY WORK Angular 12 Programmering

HVORFOR STUDERE DETTE KURSUS

Dette omfattende Angular 12-programmeringskursus er en kombination af teoretisk læring og praktiske laboratorier, der inkluderer en introduktion til Angular, efterfulgt af TypeScript, komponenter, direktiver, tjenester, HTTP-klient, test og fejlfinding.
Kurset er spækket med nyttige og handlingsrettede oplysninger, som du kan anvende til dit arbejde med det samme. Lær det grundlæggende i grundlæggende Angular 12-udvikling, såsom enkeltsides browserapplikationer, responsive webwebsteder og hybride mobilapplikationer.
Note: Vi kan også levere træning på andre versioner af Angular. Kontakt os venligst for at foretage en forespørgsel eller melde din interesse.

HVAD DU LÆRER
Når du har gennemført dette kursus, vil du være i stand til at:

• Udvikle enkeltsidede Angular-applikationer ved hjælp af Typescript
• Opsæt et komplet Angular-udviklingsmiljø
• Opret komponenter, direktiver, tjenester, rør, formularer og tilpassede validatorer
• Håndter avancerede netværksdatahentningsopgaver ved hjælp af Observables Forbrug data fra REST web tjenester ved hjælp af Angular HT TP Client Håndtér push-dataforbindelser ved hjælp af WebSockets protokol
• Arbejd med Angular Pipes for at formatere data
• Brug avancerede Angular Component Router-funktioner
• Test og fejlfind Angular-applikationer ved hjælp af indbyggede værktøjer.

KURSUSEMNER

Kapitel 1. Introduktion til Angular

• Hvad er Angular?
• Centrale træk ved Angular Framework Passende brugssager
• Byggesten i en vinkelapplikation Grundlæggende arkitektur for en vinkelapplikation Installation og brug af Angular
• Anatomi af en vinkelapplikation, der kører applikationen
• Opbygning og implementering af Application Angular for Native Mobile Apps
• Oversigt

Kapitel 2. Introduktion til TypeScript

• Programmeringssprog til brug med Angular TypeScript-syntaks
• Programmeringsredaktører
• Typesystemet – definition af variabler
• Typesystemet – Definition af arrays
• Grundlæggende primitive typer
• Indtast funktioner
• Skriv inferens
• Definition af klasser
• Klasse metoder
• Synlighedskontrol
• Klasseskonstruktører
• Klassekonstruktører – Alternative formuinitialiserede felter
• Grænseflader
• Arbejde med ES6-moduler
• var vs lad
• Pilfunktioner
• Pilfunktion Kompakt syntaksskabelonstrenge
• Generiske lægemidler i klassen
• Generiske lægemidler i funktion
• Oversigt

Kapitel 3. Komponenter

• Hvad er en komponent?
• Et eksample Komponent
• Oprettelse af en komponent ved hjælp af Angular CLI
• Komponentklassen
• @Component-dekoratøren
• Registrering af en komponent til dens modulkomponentskabelon
• Example: HelloComponent skabelon
• Example: HelloComponent-klassen ved hjælp af en komponent
• Kør applikationen
• Komponenthierarki
• Applikationsrodkomponenten
• Bootstrap File
• Komponent Lifecycle Kroge Eksample Livscykluskroge
• CSS stilarter
• Oversigt

Kapitel 4. Komponentskabeloner

• Skabeloner
• Skabelonplacering
• The Moustache {{ }} Syntaks
• Indstilling af DOM-elementegenskaber
• Indstilling af elementets brødtekst
• Begivenhedsbinding
• Expression Event Handler
• Forhindre standardhåndtering
• Attributdirektiver
• Anvend stilarter ved at ændre CSS-klasser
• Example: ngKlasse
• Anvendelse af stilarter direkte
• Strukturdirektiver
• Betinget udfør skabelon
• Example: ngIf
• Looping ved hjælp af ngFor
• ngFor lokale variabler
• Manipulering af samlingen Example – Sletning af et element
• Varesporing med ngFor at bytte elementer med ngSwitch-grupperingselementer
• Skabelonreferencevariabeloversigt

Kapitel 5. Kommunikation mellem komponenter

• Grundlæggende kommunikation
• Dataflow-arkitekturen
• Forberedelse af barnet til at modtage data
• Send data fra forældre
• Mere om indstilling af egenskaber
• Affyringshændelse fra en komponent
• @Output() Eksample – Underordnet komponent @Output() Eksample – Forælderkomponent
• Fuld tovejsbinding
• Opsætning af tovejs databinding i forældre
• Oversigt

Kapitel 6. Skabelondrevne formularer

• Skabelondrevne formularer
• Import af formularer modul
• Grundlæggende tilgang
• Opsætning af en formular
• Få brugerinput
• Udeladelse af ngForm-attribut
• Initialiser formularen
• Tovejs databinding
• Formularvalidering
• Vinkelvalidatorer
• Viser valideringstilstand ved hjælp af klasser Yderligere inputtyper
• Afkrydsningsfelter
• Vælg (Drop Down) felter
• Gengivelsesmuligheder for felter for Vælg (Drop Down) dato
• Radioknapper
• Oversigt

Kapitel 7. Reaktive former

• Reaktive formularer overview
• Byggestenene
• Importer ReactiveFormsModule
• Konstruer en formular
• Design skabelonen
• Hentning af inputværdier
• Initialisering af inputfelter
• Indstilling af formularværdier
• Abonner på inputændringer
• Validering
• Indbyggede validatorer
• Viser valideringsfejl
• Brugerdefineret validator
• Brug af en brugerdefineret validator
• Levering af konfiguration til Custom Validator
• FormArray – Tilføj dynamisk input
• FormArray – Komponentklassen
• FormArray – Skabelonen
• FormArray – Værdier
• Sub FormGroups – Komponentklasse
• Sub FormGroups – HTML-skabelon
• Hvorfor bruge Sub FormGroups
• Oversigt

Kapitel 8. Services og afhængighedsinjektion

• Hvad er en service?
• Oprettelse af en grundlæggende service
• Serviceklassen
• Hvad er afhængighedsinjektion?
• Injicere en serviceinstans
• injektorer
• Injektorhierarki
• Registrering af en service med Root Injector
• Registrering af en service med en komponents injektor
• Registrer en tjeneste med en funktionsmodulinjektor
• Hvor skal man registrere en tjeneste?
• Afhængighedsinjektion i andre artefakter, der giver en alternativ implementeringsafhængighedsinjektion og @Host
• Dependency Injection og @Valgfri
• Oversigt

Kapitel 9. HTTP-klient

• Angular HT TP-klienten
• Brug af HT TP-klienten – Overview
• Importerer HttpClientModule
• Service ved hjælp af HttpClient
• Lav en GET-anmodning
• Hvad gør et observerbart objekt?
• Brug af tjenesten i en komponent
• PeopleService Client Component Fejlhåndtering
• Tilpasning af fejlobjektet
• Lav en POST-anmodning
• Lav en PUT-anmodning
• Lav en SLETTE-anmodning

Kapitel 10. Rør og dataformatering

• Hvad er rør?
• Indbyggede rør
• Brug af rør i HTML-skabelon Chaining Pipes
• Internationaliserede rør (i18n) Indlæser lokalitetsdata
• Datoen Pipe
• Nummeret Pipe
• Valutarør
• Opret et brugerdefineret rør
• Custom Pipe Example
• Brug af brugerdefinerede rør
• Brug af et rør med ngFor
• Et filterrør
• Rørkategori: Rent og urent
• Oversigt
• Pure Pipe Example
• Urent rør Example
• Oversigt

Kapitel 11. Introduktion til enkeltsideapplikationer

• Hvad er en Single Page Application (SPA) traditionel Web Anvendelse
• SPA arbejdsgang
• Single Page Application Advantages HTML5 History API
• SPA udfordringer
• Implementering af SPA'er ved hjælp af Angular Summary

Kapitel 12. Angular Component Router

• Komponent-routeren
• View Navigation
• Angular Router API
• Oprettelse af en routeraktiveret applikation
• Vært for de rutede komponenter
• Navigation ved hjælp af links og knapper
• Programmatisk navigation
• Passerende ruteparametre
• Navigering med ruteparametre
• Indhentning af ruteparameterværdier
• Hentning af ruteparameteren synkront
• Hentning af en ruteparameter asynkront
• Forespørgselsparametre
• Levering af forespørgselsparametre
• Henter forespørgselsparametre asynkront
• Problemer med manual URL indtastning og bogmærke
• Oversigt

Kapitel 13. Avanceret HTTP-klient

• Anmodningsmuligheder
• Returnerer et HttpResponse-objekt
• Indstilling af anmodningsoverskrifter
• Oprettelse af nye observabler
• Oprettelse af en simpel observerbar
• Observerbare konstruktørmetoden Observerbare operatører
• Kortet og filteret Operatører
• FlatMap()-operatøren
• Tap()-operatøren
• Zip()-kombinatoren
• Caching af HT TP-svar
• Foretage sekventielle HT TP-opkald
• Foretage parallelle opkald
• Tilpasning af fejlobjekt med catchError()
• Fejl i pipeline
• Fejlgendannelse
• Oversigt

Kapitel 14. Vinkelmoduler

• Hvorfor vinkelmoduler?
• Anatomi af en modulklasse
• @NgModule Egenskaber
• Funktionsmoduler
• Example Modulstruktur
• Opret et domænemodul
• Opret et routet/routingmodulpar
• Opret et servicemodul
• Oprettelse af fælles moduler

Kapitel 15. Avanceret routing

• Routing-aktiveret funktionsmodul
• Brug af funktionsmodulet
• Doven indlæsning af funktionsmodulet
• Oprettelse af links til funktionsmodulets komponenter
• Mere om Lazy Loading
• Forindlæsning af moduler
• Standardrute
• Wildcard-rutesti
• omdirigere til
• Børneruter
• Definition af børneruter
• for Børneruter
• Links til børneruter
• Navigationsvagter
• Oprettelse af vagtimplementeringer
• Brug af vagter på en rute
• Oversigt

Kapitel 16. Enhedstest af vinkelapplikationer

• Enhedstest af vinkelartefakter
• Testværktøjer
• Typiske testtrin
• Testresultater
• Jasmine Test Suites
• Jasmine-specifikationer (enhedstest)
• Forventninger (påstande)
• Matchere
• Examples om at bruge matchere
• Brug af ikke-ejendommen
• Opsætning og nedtagning i Unit Test Suites
• Example af førHver og efterHver funktioner
• Vinkeltestmodul
• Example Vinkeltestmodul
• Test af en tjeneste
• Injicere en serviceinstans
• Test en synkron metode
• Test en asynkron metode
• Brug af Mock HT TP Client
• Levering af dåsesvar
• Test af en komponent
• Komponenttestmodul
• Oprettelse af en komponentinstans
• ComponentFixture-klassen
• Grundlæggende komponenttest
• DebugElement-klassen
• Simulering af brugerinteraktion
• Oversigt

Kapitel 17. Debugging

• Overview af Angular Debugging
• Viewing TypeScript-kode i Debugger
• Brug af søgeordet debugger
• Debug logning
• Hvad er Angular DevTools?
• Brug af Angular DevTools
• Angular DevTools – Komponentstruktur
• Angular DevTools – Change Detection Execution
• Fanger syntaksfejl
• Oversigt

Laboratorieøvelser

• Lab 1. Introduktion til Angular
• Lab 2. Introduktion til TypeScript
• Lab 3. Introduktion til komponenter
• Lab 4. Komponentskabelon
• Lab 5. Opret en fotogallerikomponent
• Lab 6. Skabelondrevet formular
• Lab 7. Opret en redigeringsformular
• Lab 8. Reaktiv form
• Lab 9. Udvikl en service
• Lab 10. Udvikl en HT TP-klient
• Lab 11. Brug Pipes
• Lab 12. Grundlæggende enkeltsideapplikation ved hjælp af routerlab 13. Byg en enkeltsideapplikation (SPA)
• Lab 14. Avanceret HT TP-klient
• Lab 15. Brug af Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Avanceret routing
• Lab 18. Enhedstest
• Lab 19. Debugging Angular Applications

HVEM ER KURSET FOR?
Dette kursus henvender sig til alle, der har brug for at lære det grundlæggende i Angular 12-udvikling og anvende det til at skabe web ansøgninger med det samme. Vi kan også levere og tilpasse dette kursus til større grupper – hvilket sparer din organisation for tid, penge og ressourcer.

FORUDSÆTNINGER
Web udviklingserfaring ved brug af HTML, CSS og JavaScript er påkrævet for at få mest muligt ud af dette Angular-kursus. Kendskab til browserens DOM er også nyttig. Tidligere Angular-erfaring med AngularJS eller en hvilken som helst version af Angular er ikke påkrævet.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokumenter/ressourcer

LUMIFY WORK Angular 12 Programmering [pdfBrugervejledning Angular 12 Programmering, Angular, 12 Programmering, Programmering

Referencer

• Brugermanual