LUMIFY WORK Angular 15 Programming User Guide

LUMIFY Angular 15 Programming - Featured Image

ANSØGNING OG WEB UDVIKLING
Angular 15 programmering
LÆNGDE 5 dage
VERSION 15

HVORFOR STUDERE DETTE KURSUS

Dette intensive og omfattende Angular 15-kursus giver deltagerne færdigheder, som de kan bruge med det samme i deres arbejde. Du lærer det grundlæggende i Angular 15-udvikling, såsom enkeltsides browserapplikationer, responsive webwebsteder og hybride mobilapplikationer.
Dette kursus er en kombination af teoretisk læring og praktiske laboratorier, der inkluderer en introduktion til Angular, efterfulgt af TypeScript, komponenter, vejledninger, tjenester, HTTPClient, testning og fejlfinding.
Note: Vi kan også levere træning i andre versioner af Angular. Kontakt os venligst for at foretage en forespørgsel eller melde din interesse.

ANGULAR VED LUMIFY ARBEJDE

HVAD DU LÆRER

Efter en vellykket gennemførelse af dette kursus vil du have viden til at:

Udvikle enkeltsides kantede applikationer ved hjælp af Typescript
Opsæt et komplet Angular-udviklingsmiljø
Opret komponenter, vejledninger, 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 HTTP-klienten
Håndter push-dataforbindelsesioner ved hjælp af WebSocket 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
Arbejd med Angular CLI

Min instruktør var fantastisk ved at kunne sætte scenarier ind i den virkelige verden, der var relateret til min specifikke situation.
Jeg fik mig til at føle mig velkommen fra det øjeblik, jeg ankom, og evnen til at sidde som en gruppe uden for klasseværelset for at diskutere vores situationer og vores mål var yderst værdifuld.
Jeg lærte meget og følte, at det var vigtigt, at mine mål ved at deltage i dette kursus blev nået.
Godt arbejde Lumify Work-team.AMANDA NICOL
IT SUPPORT SERVICES MANAGER – HEALTH WORLD LIMITED

KURSUSEMNER

Introduktion til Angular
• Hvad er Angular?
• Centrale egenskaber ved Angular Framework
• Passende anvendelsestilfælde
• Byggesten i en vinkelapplikation
• Grundlæggende arkitektur af en vinkelapplikation
• Installation og brug af Angular
• Anatomi af en kantet applikation
• Kørsel af applikationen
• Opbygning og implementering af applikationen
• Angular til Native Mobile Apps
Introduktion til TypeScript
• Programmeringssprog til brug med Angular
• TypeScript-syntaks
• Programmeringsredaktører
• Typesystemet – Definition af variabler
• Typesystemet – definerende arrays
• Grundlæggende primitive typer
• Indtast Funktionsioner
• Indtast inferens
• Definition af klasser
• Klassemetoder
• Synlighedskontrol
• Klassekonstruktører
• Klassekonstruktører – alternativ form
• Ikke-initialiserede felter
• Interfaces
• Arbejde med ES6-moduler
• var vs lad
• Pilefunktioner
• Pilfunktion Kompakt syntaks
• Skabelonstrenge
• Generiske lægemidler i klassen
• Generiske lægemidler i funktion
Komponenter
• Hvad er en komponent?
• Et eksample Komponent
• Oprettelse af en komponent ved hjælp af Angular CLI
• Komponentklassen
• @Component Decorator
• Registrering af en komponent til dens modul
• Komponentskabelon
• Eksample: HelloComponent skabelon
• Eksample: HelloComponent-klassen
• Brug af en komponent
• Kør applikationen
• Komponenthierarki
• Applikationsrodkomponenten
• Bootstrap File
• Komponent Lifecycle kroge
• Eksample Livscykluskroge
• CSS-stile
Komponent skabeloner
• Skabeloner
• Skabelonplacering
• The Moustache {{ }} Syntaks
• Indstilling af DOM-elementegenskaber
• Indstilling af elementets brødtekst
• Hændelsesbinding
• Expression Event Handler
• Forhindre standardhåndtering
• Attributdirektiver
• Anvend stilarter ved at ændre CSS-klasser
• Eksample: ngKlasse
• Anvendelse af stilarter direkte
• Strukturdirektiver
• Betinget udfør skabelon
• Eksample: ngIf
• Looping ved hjælp af ngFor
• ngFor lokale variabler
• Manipulering af samlingen
• Eksample – Sletning af et element
• Varesporing med ngFor
• Bytte elementer med ngSwitch
• Gruppering af elementer
• Skabelonreferencevariabel
Interkomponent kommunikation
• Grundlæggende kommunikation
• Dataflowarkitekturen
• Forberedelse af barnet til at modtage data
• Send data fra forældre
• Mere om indstilling af egenskaber
• Affyringshændelse fra en komponent
• @Output() Eksample – Børnekomponent
• @Output() Eksample – Forælderkomponent
• Fuld tovejsbinding
• Opsætning af tovejs databinding i forældre
Skabelon og drevne 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
• Visning af valideringstilstand ved hjælp af klasser
• Yderligere inputtyper
• Afkrydsningsfelter
• Vælg (Drop Down) felter
• Gengivelsesmuligheder for valg (rullemenu)
• Datofelter
• Radioknapper
Reaktive formularer
• Reaktive formularer overview
• Byggestenene
• Importer Reactive FormsModule
• Konstruer en formular
• Design skabelonen
• Hentning af inputværdier
• Initialisering af inputfelterne
• Indstilling af formularværdier
• Abonner på inputændringer
• Validering
• Indbyggede validatorer
• Viser valideringsfejl
• Custom 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
Services og afhængighedsinjektion
• Hvad er en service?
• Oprettelse af en basistjeneste
• Serviceklassen
• Hvad er Dependency Injection?
• Injicere en serviceinstans
• Injektorer
• Injektorhierarki
• Registrering af en service med rodinjektoren
• 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
• Tilvejebringelse af en alternativ implementering
• Dependency Injection og @Host
• Dependency Injection og @Valgfri
HTTP-klient
• Angular HTTP-klienten
• Brug af HTTP-klienten – Overview
• Importer HttpClientModule
• Service ved hjælp af HttpClient
• At lave en GET-anmodning
• Hvad gør et observerbart objekt?
• Brug af tjenesten i en komponent
• PeopleService-klientkomponenten
• Fejlhåndtering
• Tilpasning af fejlobjektet
• Lav en POST-anmodning
• Lav en PUT-anmodning
• Foretag en SLETTE-anmodning
Rør og dataformatering
• Hvad er rør?
• Indbyggede rør
• Brug af Pipes i HTML-skabelon
• Kæderør
• Internationaliserede rør (i18n)
• Indlæsning af 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
• Pure Pipe Example
• Urent rør Example
Introduktion til enkeltsideapplikationer
• Hvad er en Single Page Application (SPA)
• Traditionel Web Anvendelse
• SPA Workflow
• Single Page Application Advantages
• HTML5 History API
• SPA-udfordringer
• Implementering af SPA'er ved hjælp af Angular
Angular Component Router
• Komponentrouteren
• 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
• Passering af ruteparametre
• Navigering med ruteparametre
• Indhentning af ruteparameterværdier
• Synkront at hente ruteparameteren
• Hentning af en ruteparameter asynkront
• Forespørgselsparametre
• Levering af forespørgselsparametre
• Hentning af forespørgselsparametre asynkront
• Problemer med manual URL indtastning og bogmærke
Avanceret HTTP-klient
• Anmodningsindstillinger
• Returnere et HttpResponse-objekt
• Indstilling af anmodningsoverskrifter
• Oprettelse af nye observabler
• Oprettelse af en simpel observerbar
• Den observerbare konstruktørmetode
• Observerbare operatører
• Kort- og filteroperatører
• FlatMap()-operatøren
• Tap()-operatøren
• Zip()-kombinatoren
• Caching af HTTP-svar
• Foretage sekventielle HTTP-opkald
• Foretage parallelle opkald
• Tilpasning af fejlobjekt med catchError()
• Fejl i pipeline
• Fejlgendannelse
Vinkelmoduler
• Hvorfor vinkelmoduler?
• Anatomi af en modulklasse
• Egenskaber for @NgModule
• Funktionsmoduler
• Eksample Modulstruktur
• Opret et domænemodul
• Opret et rute-/rutemodulpar
• Opret et servicemodul
• Oprettelse af fælles moduler
• Brug af et modul fra et andet
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
• routerLinkActive binding
• Standardrute
• Rutesti med jokertegn
• omdirigereTil
• Børneruter
• Definition af børneruter for børneruter
• Links til børneruter
• Navigationsvagter
• Oprettelse af vagtimplementeringer
• Brug af vagter på en rute
Enhedstest vinkelapplikationer
• Enhedstest af vinkelartefakter
• Testværktøjer
• Typiske testtrin
• Test resultater
• Jasmine Test Suites
• Jasmine-specifikationer (enhedstest)
• Forventninger (påstandsioner)
• Matchere
• Eksamples om at bruge matchere
• Brug af ikke-egenskaben
• Opsætning og nedtagning i enhedstestsuiter
• Eksample af førHver og efterHver funktioner
• Vinkeltestmodul
• Eksample Vinkeltestmodul
• Test af en tjeneste
• Injicere en serviceinstans
• Test en synkron metode
• Test en asynkron metode
• Brug af Mock HTTP Client
• Levering af dåsesvar
• Afprøvning af en komponent
• Komponenttestmodul
• Oprettelse af en komponentinstans
• ComponentFixture-klassen
• Grundlæggende komponenttest
• DebugElement-klassen
• Simulering af brugerinteraktion
Fejlretning
• 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 Detect ion Execut ion
• Fange syntaksfejl

HVEM ER KURSET FOR?

Dette kursus henvender sig til alle, der har brug for at lære det grundlæggende i Angular 15-udvikling og anvende det med det samme til at skabe web applikationer.
Vi kan også levere og tilpasse dette kursus til større grupper – hvilket sparer din organisation for tid, penge og ressourcer. For mere information, kontakt os venligst via e-mail på ph.training@lumifywork.com

FORUDSÆTNINGER

Web udviklingserfaring med 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å nyttigt
Ingen forudgående erfaring med Angular eller AngularJS er påkrævet

Udbuddet af dette kursus af Lumify Work er underlagt reservationsbetingelserne.
Læs venligst vilkår og betingelser omhyggeligt, før du tilmelder dig dette kursus, da tilmelding til kurset er betinget af accept af disse vilkår og betingelser.

https://www.lumifywork.com/en-ph/courses/angular-15-programming/ ph.training@lumifywork.com
lumifywork.com
facebook.com/LumifyWorkPh
linkedin.com/company/lumify-work-ph
twitter.com/LumifyWorkPH
youtube.com/@lumifywork