LUMIFY WORK Angular 12 programmeringsbrukerveiledning

LUMIFY WORK Angular 12 Programmering

HVORFOR STUDERE DETTE KURSET

Dette omfattende Angular 12-programmeringskurset er en kombinasjon av teoretisk læring og praktiske laboratorier som inkluderer en introduksjon til Angular, etterfulgt av TypeScript, komponenter, direktiver, tjenester, HTTP-klient, testing og feilsøking.
Kurset er spekket med nyttig og praktisk informasjon du kan bruke på arbeidet ditt med en gang. Lær det grunnleggende om grunnleggende Angular 12-utvikling, som responsive nettleserapplikasjoner på én side webnettsteder og hybride mobilapplikasjoner.
Note: Vi kan også levere opplæring på andre versjoner av Angular. Ta kontakt med oss ​​for å spørre eller melde din interesse.

HVA DU LÆRER
Etter vellykket gjennomføring av dette kurset vil du kunne:

• Utvikle enkeltsides Angular-applikasjoner ved å bruke Typescript
• Sett opp et komplett Angular utviklingsmiljø
• Lag komponenter, direktiver, tjenester, rør, skjemaer og tilpassede validatorer
• Håndter avanserte nettverksdatainnhentingsoppgaver ved å bruke Observables Consumer data from REST web tjenester som bruker Angular HT TP-klienten Håndter push-dataforbindelser ved å bruke WebSockets protokoll
• Arbeid med Angular Pipes for å formatere data
• Bruk avanserte Angular Component Router-funksjoner
• Test og feilsøk Angular-applikasjoner ved hjelp av innebygde verktøy.

KURSEMNER

Kapittel 1. Introduksjon til Angular

• Hva er Angular?
• Sentrale funksjoner i Angular Framework Passende brukstilfeller
• Byggesteiner for en Angular-applikasjon Grunnleggende arkitektur for en Angular-applikasjon Installere og bruke Angular
• Anatomien til en vinkelapplikasjon som kjører applikasjonen
• Bygge og distribuere Application Angular for Native Mobile Apps
• Sammendrag

Kapittel 2. Introduksjon til TypeScript

• Programmeringsspråk for bruk med Angular TypeScript-syntaks
• Programmeringsredaktører
• Typesystemet – Definere variabler
• Typesystemet – Definere matriser
• Grunnleggende primitive typer
• Skriv inn funksjoner
• Skriv inferens
• Definere klasser
• Klassemetoder
• Synlighetskontroll
• Klasse konstruktører
• Klassekonstruktører – Alternative felt som ikke er initialiserte
• Grensesnitt
• Arbeid med ES6-moduler
• var vs la
• Pilfunksjoner
• Pilfunksjon Kompakt syntaksmalstrenger
• Generiske legemidler i klassen
• Generikk i funksjon
• Sammendrag

Kapittel 3. Komponenter

• Hva er en komponent?
• En eksample komponent
• Opprette en komponent ved å bruke Angular CLI
• Komponentklassen
• @Component-dekoratøren
• Registrere en komponent til dens modulkomponentmal
• Example: HelloComponent-mal
• Example: HelloComponent-klassen ved hjelp av en komponent
• Kjør applikasjonen
• Komponenthierarki
• Applikasjonsrotkomponenten
• Bootstrap File
• Komponent Lifecycle Kroker Eksample Livssykluskroker
• CSS-stiler
• Sammendrag

Kapittel 4. Komponentmaler

• Maler
• Malplassering
• The Moustache {{ }} Syntaks
• Innstilling av DOM-elementegenskaper
• Innstilling Element Brødtekst
• Begivenhetsbinding
• Expression Event Handler
• Forhindre standardhåndtering
• Attributtdirektiver
• Bruk stiler ved å endre CSS-klasser
• Example: ngKlasse
• Bruk stiler direkte
• Strukturdirektiver
• Betinget utfør mal
• Example: ngHvis
• Looping ved hjelp av ngFor
• ngFor lokale variabler
• Manipulere innsamlingen Eksample – Sletting av et element
• Varesporing med ngFor å bytte elementer med ngSwitch-grupperingselementer
• Sammendrag av malreferansevariabel

Kapittel 5. Kommunikasjon mellom komponenter

• Grunnleggende kommunikasjon
• Dataflytarkitekturen
• Forberede barnet til å motta data
• Send data fra foreldre
• Mer om å angi egenskaper
• Utfyringshendelse fra en komponent
• @Output() Eksample – Underordnet komponent @Output() Eksample – Foreldrekomponent
• Full toveisbinding
• Sette opp toveis databinding i overordnet
• Sammendrag

Kapittel 6. Maldrevne skjemaer

• Maldrevne skjemaer
• Importer skjemamodul
• Grunnleggende tilnærming
• Sette opp et skjema
• Får brukerinndata
• Utelater ngForm-attributt
• Initialiser skjemaet
• Toveis databinding
• Formvalidering
• Vinkelvalidatorer
• Viser valideringstilstand ved bruk av klasser Ytterligere inndatatyper
• Avmerkingsbokser
• Velg (rullegardin) felt
• Gjengivelsesalternativer for felter for Velg (rullegardin) dato
• Radioknapper
• Sammendrag

Kapittel 7. Reaktive skjemaer

• Reaktive skjemaer overview
• Byggeklossene
• Importer ReactiveFormsModule
• Lag et skjema
• Design malen
• Få inngangsverdier
• Initialisere inndatafeltene
• Angi skjemaverdier
• Abonner på Input Changes
• Validering
• Innebygde validatorer
• Viser valideringsfeil
• Egendefinert validator
• Bruke en tilpasset validator
• Leverer konfigurasjon til Custom Validator
• FormArray – Legg til innganger dynamisk
• FormArray – Komponentklassen
• FormArray – Malen
• FormArray – Verdier
• Sub FormGroups – Komponentklasse
• Sub FormGroups – HTML-mal
• Hvorfor bruke underskjemagrupper
• Sammendrag

Kapittel 8. Tjenester og avhengighetsinjeksjon

• Hva er en tjeneste?
• Opprette en grunnleggende tjeneste
• Serviceklassen
• Hva er avhengighetsinjeksjon?
• Injiserer en tjenesteforekomst
• Injektorer
• Injektorhierarki
• Registrere en tjeneste med rotinjektoren
• Registrere en tjeneste med en komponents injektor
• Registrer en tjeneste med en funksjonsmodulinjektor
• Hvor registrerer jeg en tjeneste?
• Avhengighetsinjeksjon i andre artefakter som gir en alternativ implementeringsavhengighetsinjeksjon og @Host
• Dependency Injection og @Valgfri
• Sammendrag

Kapittel 9. HTTP-klient

• Angular HT TP-klienten
• Bruk av HT TP-klienten – Overview
• Importerer HttpClientModule
• Tjeneste ved hjelp av HttpClient
• Gir en GET-forespørsel
• Hva gjør et observerbart objekt?
• Bruk av tjenesten i en komponent
• PeopleService Client Component Feilhåndtering
• Tilpasse feilobjektet
• Gir en POST-forespørsel
• Gir en PUT-forespørsel
• Gir en SLETTE-forespørsel

Kapittel 10. Rør og dataformatering

• Hva er rør?
• Innebygde rør
• Bruk av rør i HTML-mal Kjederør
• Internasjonaliserte rør (i18n) Laster lokalitetsdata
• Datoen Pipe
• Tallet Pipe
• Valuta Pipe
• Lag et tilpasset rør
• Tilpasset rør Eksample
• Bruker tilpassede rør
• Bruke et rør med ngFor
• Et filterrør
• Rørkategori: Rent og uren
• Sammendrag
• Pure Pipe Example
• Urent rør Eksample
• Sammendrag

Kapittel 11. Introduksjon til enkeltsideapplikasjoner

• Hva er en enkeltsideapplikasjon (SPA) tradisjonell Web Søknad
• SPA arbeidsflyt
• Enkeltsideapplikasjon Advantages HTML5 History API
• SPA-utfordringer
• Implementering av SPA-er ved å bruke Angular Summary

Kapittel 12. Angular Component Router

• Komponentruteren
• View Navigasjon
• Angular Router API
• Opprette en ruteraktivert applikasjon
• Vert for de rutede komponentene
• Navigering ved hjelp av lenker og knapper
• Programmatisk navigering
• Passerer ruteparametere
• Navigere med ruteparametre
• Innhenting av ruteparameterverdier
• Henter ruteparameteren synkront
• Hente en ruteparameter asynkront
• Spørringsparametere
• Oppgi spørringsparametre
• Henter spørringsparametere asynkront
• Problemer med manualen URL oppføring og bokmerke
• Sammendrag

Kapittel 13. Avansert HTTP-klient

• Forespørselsalternativer
• Returnere et HttpResponse-objekt
• Angi forespørselshoder
• Opprette nye observerbare objekter
• Opprette en enkel observerbar
• Den observerbare konstruktørmetoden Observerbare operatører
• Kartet og filteret Operatører
• FlatMap()-operatøren
• Tap()-operatøren
• Zip()-kombinatoren
• Bufring av HT TP-svar
• Foreta sekvensielle HT TP-anrop
• Foreta parallelle anrop
• Tilpasse feilobjekt med catchError()
• Feil i pipeline
• Feilgjenoppretting
• Sammendrag

Kapittel 14. Vinkelmoduler

• Hvorfor vinkelmoduler?
• Anatomi av en modulklasse
• @NgModule-egenskaper
• Funksjonsmoduler
• Example Modulstruktur
• Opprett en domenemodul
• Opprett et rutet/rutingsmodulpar
• Opprett en tjenestemodul
• Opprette felles moduler

Kapittel 15. Avansert ruting

• Ruting aktivert funksjonsmodul
• Bruke funksjonsmodulen
• Lazy laster funksjonsmodulen
• Opprette koblinger for funksjonsmodulkomponentene
• Mer om lat lasting
• Forhåndsinnlasting av moduler
• Standard rute
• Rutesti med jokertegn
• omdirigere til
• Barneruter
• Definere barneruter
• for Barneruter
• Lenker for barneruter
• Navigasjonsvakter
• Opprette vaktimplementeringer
• Bruke vakter i en rute
• Sammendrag

Kapittel 16. Enhetstesting av vinkelapplikasjoner

• Enhetstesting av vinkelartefakter
• Testverktøy
• Typiske testtrinn
• Testresultater
• Jasmine Test Suites
• Jasmine-spesifikasjoner (enhetstester)
• Forventninger (påstander)
• Matchere
• Examples om bruk av matchere
• Bruker ikke eiendom
• Oppsett og riving i Unit Test Suites
• Example av førHver og etterHver funksjoner
• Vinkeltestmodul
• Example Vinkeltestmodul
• Testing av en tjeneste
• Injiserer en tjenesteforekomst
• Test en synkron metode
• Test en asynkron metode
• Bruke Mock HT TP Client
• Leverer hermetisk respons
• Testing av en komponent
• Komponenttestmodul
• Opprette en komponentforekomst
• ComponentFixture-klassen
• Grunnleggende komponenttester
• DebugElement-klassen
• Simulering av brukerinteraksjon
• Sammendrag

Kapittel 17. Feilsøking

• Overview av Angular Debugging
• Viewing TypeScript-kode i Debugger
• Bruke søkeordet for feilsøking
• Feilsøkingslogging
• Hva er Angular DevTools?
• Bruke Angular DevTools
• Angular DevTools – Komponentstruktur
• Angular DevTools – Utførelse av endringsdeteksjon
• Fanger syntaksfeil
• Sammendrag

Laboratorieøvelser

• Lab 1. Introduksjon til Angular
• Lab 2. Introduksjon til TypeScript
• Lab 3. Introduksjon til komponenter
• Lab 4. Komponentmal
• Lab 5. Lag en fotogallerikomponent
• Lab 6. Maldrevet skjema
• Lab 7. Lag et redigeringsskjema
• Lab 8. Reaktiv form
• Lab 9. Utvikle en tjeneste
• Lab 10. Utvikle en HT TP-klient
• Lab 11. Bruk Pipes
• Lab 12. Grunnleggende enkeltsideapplikasjon ved bruk av ruterlab 13. Bygg en enkeltsideapplikasjon (SPA)
• Lab 14. Avansert HT TP-klient
• Lab 15. Bruke Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Avansert ruting
• Lab 18. Enhetstesting
• Lab 19. Debugging Angular Applications

HVEM ER KURSET FOR?
Dette kurset er rettet mot alle som trenger å lære det grunnleggende om Angular 12-utvikling og bruke det til å skape web søknader med en gang. Vi kan også levere og tilpasse dette kurset for større grupper – noe som sparer organisasjonen din for tid, penger og ressurser.

FORUTSETNINGER
Web utviklingserfaring ved bruk av HTML, CSS og JavaScript er nødvendig for å få mest mulig ut av dette Angular-kurset. Kunnskap om nettleseren DOM er også nyttig. Tidligere Angular-erfaring, med AngularJS eller en hvilken som helst versjon av Angular, er ikke nødvendig.
https://www.lumifywork.com/en-au/courses/angular-12-programming/