SØKNAD OG WEB UTVIKLING
Angular 15 programmering
LENGDE 5 dager
VERSJON 15
HVORFOR STUDERE DETTE KURSET
Dette intensive og omfattende Angular 15-kurset gir deltakerne ferdigheter de kan bruke umiddelbart i arbeidet. Du vil lære det grunnleggende om Angular 15-utvikling, for eksempel enkeltsides nettleserapplikasjoner, responsive webnettsteder og hybride mobilapplikasjoner.
Dette kurset er en kombinasjon av teoretisk læring og praktiske laboratorier som inkluderer en introduksjon til Angular, etterfulgt av TypeScript, komponenter, direkte iver, tjenester, HTTPClient, testing og feilsøking.
Note: Vi kan også levere opplæring på andre versjoner av Angular. Ta kontakt med oss for å foreta en forespørsel eller melde din interesse.
ANGULAR PÅ LUMIFY ARBEID
HVA DU LÆRER
Etter vellykket gjennomføring av dette kurset vil du ha kunnskap til å:
- Utvikle enkeltside vinkelapplikasjoner ved å bruke Typescript
- Sett opp et komplett Angular utviklingsmiljø
- Lag komponenter, direkte iver, tjenester, rør, skjemaer og tilpassede validatorer
- Håndter avanserte nettverksdatainnhentingsoppgaver ved hjelp av Observables
- Bruk data fra REST web tjenester som bruker Angular HTTP-klienten
- Håndter push-data tilkoblingsioner ved hjelp av WebSocket 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
- Arbeid med Angular CLI
Instruktøren min var flott å kunne sette scenarier inn i virkelige instanser som var relatert til min spesifikke situasjon.
Jeg følte meg velkommen fra det øyeblikket jeg ankom, og evnen til å sitte som en gruppe utenfor klasserommet for å diskutere situasjonene og målene våre var ekstremt verdifull.
Jeg lærte mye og følte det var viktig at målene mine ved å delta på dette kurset ble nådd.
Flott jobbet Lumify Work-team.
AMANDA NICOL
IT SUPPORT SERVICES MANAGER – HEALTH WORLD LIMITED
KURSEMNER
- Vi introduserer Angular
• Hva er Angular?
• Sentrale funksjoner i Angular Framework
• Passende brukstilfeller
• Byggesteiner for en vinkelapplikasjon
• Grunnleggende arkitektur for en vinkelapplikasjon
• Installere og bruke Angular
• Anatomi av en vinkelapplikasjon
• Kjøre applikasjonen
• Bygge og distribuere applikasjonen
• Angular for Native Mobile Apps - 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
• Siktkontroll
• Klassekonstruktører
• Klassekonstruktører – alternativ form
• Ikke initialiserte felt
• Grensesnitt
• Arbeide med ES6-moduler
• var vs la
• Pilfunksjoner
• Pilfunksjon Kompakt syntaks
• Malstrenger
• Generiske legemidler i klassen
• Generikk i funksjon - Komponenter
• Hva er en komponent?
• Et eksample komponent
• Lage en komponent ved å bruke Angular CLI
• Komponentklassen
• @Component-dekoratøren
• Registrere en komponent til modulen
• Komponentmal
• Eksample: HelloComponent-mal
• Eksample: HelloComponent-klassen
• Bruke en komponent
• Kjør programmet
• Komponenthierarki
• Applikasjonsrotkomponenten
• Bootstrap File
• Komponentlivssykluskroker
• Eksample Livssykluskroker
• CSS-stiler - Komponentmaler
• Maler
• Malplassering
• Barten {{ }}-syntaks
• Innstilling av DOM-elementegenskaper
• Innstilling av elementets brødtekst
• Hendelsesbinding
• Expression Event Handler
• Forhindre standardhåndtering
• Attributtdirektiver
• Bruk stiler ved å endre CSS-klasser
• Eksample: ngKlasse
• Bruke stiler direkte
• Strukturdirektiver
• Betinget utfør mal
• Eksample: ngHvis
• Looping med ngFor
• ngFor lokale variabler
• Manipulere samlingen
• Eksample – Sletting av et element
• Varesporing med ngFor
• Bytte elementer med ngSwitch
• Gruppering av elementer
• Malreferansevariabel - Kommunikasjon mellom komponenter
• Grunnleggende om kommunikasjon
• Dataflytarkitekturen
• Forberede barnet til å motta data
• Send data fra foreldre
• Mer om innstilling av egenskaper
• Utfyringshendelse fra en komponent
• @Output() Eksample – Barnekomponent
• @Output() Eksample – Foreldrekomponent
• Full toveisbinding
• Sette opp toveis databinding i overordnet - Mal og drevne skjemaer
• Maldrevne skjemaer
• Importer Forms Module
• Grunnleggende tilnærming
• Sette opp et skjema
• Få brukerinndata
• Utelate ngForm-attributt
• Initialiser skjemaet
• Toveis databinding
• Skjemavalidering
• Vinkelvalidatorer
• Vise valideringstilstand ved bruk av klasser
• Ytterligere inngangstyper
• Avmerkingsbokser
• Velg (rullegardin) felt
• Gjengivelsesalternativer for utvalg (rullegardin)
• Datofelt
• Radioknapper - Reaktive skjemaer
• Reaktive skjemaer overview
• Byggeklossene
• Importer Reactive FormsModule
• Konstruer et skjema
• Design malen
• Få inngangsverdier
• Initialisere inndatafeltene
• Angi skjemaverdier
• Abonnere på inngangsendringer
• 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 - Tjenester og avhengighetsinjeksjon
• Hva er en tjeneste?
• Opprette en grunnleggende tjeneste
• Serviceklassen
• Hva er Dependency Injection?
• Injisere 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
• Tilby en alternativ implementering
• Dependency Injection og @Host
• Dependency Injection og @Valgfri - HTTP-klient
• Angular HTTP-klienten
• Bruke HTTP-klienten – Overview
• Importer HttpClientModule
• Tjeneste ved hjelp av HttpClient
• Lage en GET-forespørsel
• Hva gjør et observerbart objekt?
• Bruk av tjenesten i en komponent
• PeopleService-klientkomponenten
• Feilhåndtering
• Tilpasse feilobjektet
• Lage en POST-forespørsel
• Foreta en PUT-forespørsel
• Foreta en SLETTE-forespørsel - Rør og dataformatering
• Hva er rør?
• Innebygde rør
• Bruke Pipes i HTML-mal
• Kjederør
• Internasjonaliserte rør (i18n)
• Laster lokalitetsdata
• Datoen Pipe
• Tallet Pipe
• Valutarør
• Lag et tilpasset rør
• Custom Pipe Eksample
• Bruke tilpassede rør
• Bruke et rør med ngFor
• Et filterrør
• Rørkategori: Rent og uren
• Pure Pipe Example
• Urent rør Eksample - Introduksjon til enkeltsideapplikasjoner
• Hva er en enkeltsideapplikasjon (SPA)
• Tradisjonell Web Søknad
• SPA arbeidsflyt
• Single Page Application Advantages
• HTML5 History API
• SPA-utfordringer
• Implementering av SPA-er ved å bruke Angular - 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 ruteparametre
• Navigere med ruteparametre
• Innhenting av ruteparameterverdier
• Hente ruteparameteren synkront
• Hente en ruteparameter asynkront
• Spørringsparametere
• Oppgi spørringsparametre
• Henter spørringsparametere asynkront
• Problemer med Manual URL oppføring og bokmerke - Avansert HTTP-klient
• Forespørselsalternativer
• Returnere et HttpResponse-objekt
• Angi forespørselshoder
• Opprette nye observerbare objekter
• Lage en enkel observerbar
• Den observerbare konstruktørmetoden
• Observerbare operatører
• Kart- og filteroperatører
• FlatMap()-operatøren
• Tap()-operatøren
• Zip()-kombinatoren
• Bufre HTTP-respons
• Foreta sekvensielle HTTP-anrop
• Foreta parallelle anrop
• Tilpasse feilobjekt med catchError()
• Feil i pipeline
• Feilgjenoppretting - Vinkelmoduler
• Hvorfor vinkelmoduler?
• Anatomi av en modulklasse
• @NgModule-egenskaper
• Funksjonsmoduler
• Eksample Modulstruktur
• Opprett en domenemodul
• Opprett et rutet/rutingsmodulpar
• Lag en tjenestemodul
• Opprette felles moduler
• Bruke en modul fra en annen - Avansert ruting
• Rutingaktivert funksjonsmodul
• Bruke funksjonsmodulen
• Lazy lasting av funksjonsmodulen
• Opprette koblinger for funksjonsmodulkomponentene
• Mer om lat lasting
• Forhåndsinnlasting av moduler
• routerLinkActive-binding
• Standardrute
• Rutesti med jokertegn
• omdirigere til
• Barneruter
• Definere barneruter for barneruter
• Lenker for barneruter
• Navigasjonsvakter
• Opprette vaktimplementeringer
• Bruke vakter i en rute - Enhetstesting av vinkelapplikasjoner
• Enhetstesting av vinkelartefakter
• Testverktøy
• Typiske testtrinn
• Testresultater
• Jasmine Test Suites
• Jasmine-spesifikasjoner (enhetstester)
• Forventninger (påstandsioner)
• Matchere
• Eksamples om bruk av matchere
• Bruk av ikke-egenskapen
• Oppsett og nedbygging i enhetstestsuiter
• Eksample av førHver og etterHver funksjoner
• Vinkeltestmodul
• Eksample Vinkeltestmodul
• Teste en tjeneste
• Injisere en tjenesteforekomst
• Test en synkron metode
• Test en asynkron metode
• Bruke Mock HTTP Client
• Levere hermetisk respons
• Testing av en komponent
• Komponenttestmodul
• Opprette en komponentforekomst
• ComponentFixture-klassen
• Grunnleggende komponenttester
• DebugElement-klassen
• Simulering av brukerinteraksjon - 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 – Change Detect ion Execut ion
• Fanger syntaksfeil
HVEM ER KURSET FOR?
Dette kurset er rettet mot alle som trenger å lære det grunnleggende om Angular 15-utvikling og bruke det umiddelbart til å lage web applikasjoner.
Vi kan også levere og tilpasse dette kurset for større grupper – noe som sparer organisasjonen din for tid, penger og ressurser. For mer informasjon, vennligst kontakt oss via e-post på ph.training@lumifywork.com
FORUTSETNINGER
- Web utviklingserfaring med HTML, CSS og JavaScript er nødvendig for å få mest mulig ut av dette Angular-kurset
- Kunnskap om nettleseren DOM er også nyttig
- Ingen tidligere erfaring med Angular eller AngularJS er nødvendig
Tilbudet av dette kurset av Lumify Work er underlagt bestillingsvilkårene.
Vennligst les vilkårene og betingelsene nøye før du melder deg på dette kurset, da påmelding til kurset er betinget av aksept av disse vilkårene og betingelsene.
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
Dokumenter / Ressurser
 | Angular 15 programmering |
Referanser
- Brukerhåndbokmanual.tools
Published: February 17, 2024