LUMIFY WORK Angular 12 programmeringshandbok

LUMIFY WORK Angular 12 Programmering

VARFÖR STUDERA DENNA KURS

Den här omfattande Angular 12-programmeringskursen är en kombination av teoretisk inlärning och praktiska laborationer som inkluderar en introduktion till Angular, följt av TypeScript, komponenter, direktiv, tjänster, HTTP-klient, testning och felsökning.
Kursen är fullspäckad med användbar och användbar information som du kan tillämpa på ditt arbete direkt. Lär dig grunderna i grundläggande Angular 12-utveckling som ensidig webbläsarapplikationer, responsiv webwebbplatser och hybridmobilapplikationer.
Notera: Vi kan även ge utbildning i andra versioner av Angular. Kontakta oss gärna för att göra en förfrågan eller anmäla ditt intresse.

VAD DU LÄRER
Efter framgångsrik genomgång av denna kurs kommer du att kunna:

• Utveckla ensidiga Angular-applikationer med Typescript
• Skapa en komplett Angular utvecklingsmiljö
• Skapa komponenter, direktiv, tjänster, rör, formulär och anpassade validerare
• Hantera avancerade uppgifter för hämtning av nätverksdata med hjälp av Observables Consume data from REST web tjänster som använder Angular HT TP-klienten Hantera push-dataanslutningar med hjälp av WebSockets protokoll
• Arbeta med Angular Pipes för att formatera data
• Använd avancerade Angular Component Router-funktioner
• Testa och felsöka Angular-applikationer med inbyggda verktyg.

KURSÄMNEN

Kapitel 1. Introduktion till Angular

• Vad är Angular?
• Centrala egenskaper hos Angular Framework Lämpliga användningsfall
• Byggstenar för en Angular-applikation Grundläggande arkitektur för en Angular-applikation Installera och använda Angular
• Anatomi av en vinkelapplikation som kör applikationen
• Bygga och distribuera applikationen Angular för inbyggda mobilappar
• Sammanfattning

Kapitel 2. Introduktion till TypeScript

• Programmeringsspråk för användning med Angular TypeScript-syntax
• Programmeringsredigerare
• Typsystemet – Definiera variabler
• Typsystemet – Definiera matriser
• Grundläggande primitiva typer
• Skriv in funktioner
• Skriv inferens
• Definiera klasser
• Klassmetoder
• Synlighetskontroll
• Klasskonstruktörer
• Klasskonstruktörer – alternativa oinitierade fält
• Gränssnitt
• Arbeta med ES6-moduler
• var vs låt
• Pilfunktioner
• Pilfunktion Kompakt syntaxmallsträngar
• Generika i klassen
• Generika i funktion
• Sammanfattning

Kapitel 3. Komponenter

• Vad är en komponent?
• Ett example Komponent
• Skapa en komponent med Angular CLI
• Komponentklassen
• @Component-dekoratören
• Registrera en komponent till dess modulkomponentmall
• Example: HelloComponent-mall
• Example: HelloComponent-klassen som använder en komponent
• Kör programmet
• Komponenthierarki
• Applikationsrotkomponenten
• Bootstrap File
• Komponentlivscykelkrokar Example Livscykelkrokar
• CSS-stilar
• Sammanfattning

Kapitel 4. Komponentmallar

• Mallar
• Mallplats
• Mustaschen {{ }} Syntax
• Ställa in DOM-elementegenskaper
• Inställning av elementets brödtext
• Händelsebindning
• Uttryckshändelsehanterare
• Förhindra standardhantering
• Attributdirektiv
• Använd stilar genom att ändra CSS-klasser
• Example: ngKlass
• Applicera stilar direkt
• strukturdirektiv
• Villkorligt exekvera mall
• Example: ngIf
• Looping med ngFor
• ngFör lokala variabler
• Manipulera samlingen Example – Ta bort ett objekt
• Objektspårning med ngFör att byta element med ngSwitch-grupperingselement
• Mallreferensvariabelsammanfattning

Kapitel 5. Kommunikation mellan komponenter

• Grundläggande kommunikation
• Dataflödesarkitekturen
• Förbereda barnet för att ta emot data
• Skicka data från förälder
• Mer om att ställa in egenskaper
• Utlösningshändelse från en komponent
• @Output() Example – Underordnad komponent @Output() Example – Föräldrakomponent
• Full tvåvägsbindning
• Ställa in tvåvägsdatabindning i överordnad
• Sammanfattning

Kapitel 6. Malldrivna formulär

• Malldrivna formulär
• Importera formulärmodul
• Grundläggande tillvägagångssätt
• Skapa ett formulär
• Hämta användarinmatning
• Utelämnar ngForm-attribut
• Initiera formuläret
• Tvåvägs databindning
• Formvalidering
• Vinkelvaliderare
• Visar valideringstillstånd med hjälp av klasser Ytterligare indatatyper
• Kryssrutor
• Välj (rullgardinsmenyn) fält
• Återgivningsalternativ för Välj (rullgardinsmenyn) datumfält
• Radioknappar
• Sammanfattning

Kapitel 7. Reaktiva formulär

• Reaktiva formulär överview
• Byggstenarna
• Importera ReactiveFormsModule
• Konstruera ett formulär
• Designa mallen
• Hämta indatavärden
• Initiering av inmatningsfälten
• Ställa in formulärvärden
• Prenumerera på Input Changes
• Godkännande
• Inbyggda validatorer
• Visar valideringsfel
• Anpassad validator
• Använda en anpassad validator
• Levererar konfiguration till Custom Validator
• FormArray – Lägg till indata dynamiskt
• FormArray – Komponentklassen
• FormArray – Mallen
• FormArray – Värden
• Sub FormGroups – Komponentklass
• Sub FormGroups – HTML-mall
• Varför använda Sub FormGroups
• Sammanfattning

Kapitel 8. Tjänster och beroendeinjektion

• Vad är en tjänst?
• Skapa en bastjänst
• Serviceklassen
• Vad är Dependency Injection?
• Injicera en tjänsteinstans
• injektorer
• Injektorhierarki
• Registrera en tjänst med Root Injector
• Registrera en tjänst med en komponents injektor
• Registrera en tjänst med en funktionsmodulinjektor
• Var registrerar jag en tjänst?
• Beroendeinjektion i andra artefakter som ger en alternativ implementeringsberoendeinjektion och @Host
• Dependency Injection och @Valfritt
• Sammanfattning

Kapitel 9. HTTP-klient

• Angular HT TP-klienten
• Använda HT TP-klienten – Överview
• Importerar HttpClientModule
• Tjänst som använder HttpClient
• Göra en GET-förfrågan
• Vad gör ett observerbart objekt?
• Använda tjänsten i en komponent
• PeopleService Client Component Felhantering
• Anpassa felobjektet
• Göra en POST-förfrågan
• Göra en PUT-förfrågan
• Gör en DELETE-förfrågan

Kapitel 10. Rör och dataformatering

• Vad är rör?
• Inbyggda rör
• Använda Pipes i HTML-mall Chaining Pipes
• Internationalized Pipes (i18n) Laddar lokaldata
• Datumet Pipe
• Siffran Pipe
• Valuta Pipe
• Skapa ett anpassat rör
• Custom Pipe Example
• Använder anpassade rör
• Använda ett rör med ngFor
• Ett filterrör
• Rörkategori: Rent och orent
• Sammanfattning
• Pure Pipe Example
• Orent rör Example
• Sammanfattning

Kapitel 11. Introduktion till ensidiga applikationer

• Vad är en Single Page Application (SPA) traditionell Web Ansökan
• SPA arbetsflöde
• Single Page Application Advantages HTML5 History API
• SPA-utmaningar
• Implementera SPA med hjälp av vinkelsammanfattning

Kapitel 12. Angular Component Router

• Komponentroutern
• View Navigering
• Angular Router API
• Skapa en routeraktiverad applikation
• Värd för de dirigerade komponenterna
• Navigering med länkar och knappar
• Programmatisk navigering
• Passerar ruttparametrar
• Navigera med ruttparametrar
• Hämta ruttparametervärden
• Hämta ruttparametern synkront
• Hämta en ruttparameter asynkront
• Fråga parametrar
• Ange frågeparametrar
• Hämtar frågeparametrar asynkront
• Problem med manualen URL inträde och bokmärke
• Sammanfattning

Kapitel 13. Avancerad HTTP-klient

• Begär alternativ
• Returnera ett HttpResponse-objekt
• Ställa in förfrågningsrubriker
• Skapa nya observerbara objekt
• Skapa en enkel observerbar
• Den observerbara konstruktörsmetoden Observerbara operatörer
• Kartan och filtret Operatörer
• Operatören flatMap()
• Tap()-operatören
• Zip()-kombinatorn
• Cachar HT TP-svar
• Ringa sekventiella HT TP-samtal
• Ringa parallella samtal
• Anpassa felobjekt med catchError()
• Fel i pipeline
• Felåterställning
• Sammanfattning

Kapitel 14. Vinkelmoduler

• Varför vinkelmoduler?
• Anatomi av en modulklass
• @NgModule-egenskaper
• Funktionsmoduler
• Example Modulstruktur
• Skapa en domänmodul
• Skapa ett rutt-/dirigeringsmodulpar
• Skapa en servicemodul
• Skapa gemensamma moduler

Kapitel 15. Avancerad routing

• Routing-aktiverad funktionsmodul
• Använda funktionsmodulen
• Lata laddar funktionsmodulen
• Skapa länkar för funktionsmodulens komponenter
• Mer om Lazy Loading
• Förladdning av moduler
• Standardrutt
• Wildcard Route Path
• omdirigera till
• Barnvägar
• Definiera barnrutter
• för barnvägar
• Länkar för barnvägar
• Navigationsvakter
• Skapa vaktimplementeringar
• Använda vakter i en rutt
• Sammanfattning

Kapitel 16. Enhetstestning av vinkelapplikationer

• Enhetstestning av vinkelartefakter
• Testverktyg
• Typiska teststeg
• Testresultat
• Jasmine Test Suites
• Jasmine-specifikationer (enhetstester)
• Förväntningar (påståenden)
• Matchare
• Examples om att använda matchare
• Använder inte egenskapen
• Installation och rivning i Unit Test Suites
• Example av beforeEach och afterEach Funktioner
• Vinkeltestmodul
• Example Vinkeltestmodul
• Testa en tjänst
• Injicera en tjänsteinstans
• Testa en synkron metod
• Testa en asynkron metod
• Använder Mock HT TP Client
• Levererar Canned Response
• Testa en komponent
• Komponenttestmodul
• Skapa en komponentinstans
• ComponentFixture-klassen
• Grundläggande komponenttester
• Klassen DebugElement
• Simulering av användarinteraktion
• Sammanfattning

Kapitel 17. Felsökning

• Överview av Angular Debugging
• Viewing TypeScript Code i Debugger
• Använda felsökningssökordet
• Felsökningsloggning
• Vad är Angular DevTools?
• Använder Angular DevTools
• Angular DevTools – Komponentstruktur
• Angular DevTools – Ändringsdetekteringsexekvering
• Fångar syntaxfel
• Sammanfattning

Labbövningar

• Lab 1. Introduktion till Angular
• Lab 2. Introduktion till TypeScript
• Labb 3. Introduktion till komponenter
• Lab 4. Komponentmall
• Lab 5. Skapa en fotogallerikomponent
• Lab 6. Malldrivet formulär
• Lab 7. Skapa ett redigeringsformulär
• Lab 8. Reaktiv form
• Lab 9. Utveckla en tjänst
• Lab 10. Utveckla en HT TP-klient
• Lab 11. Använd rör
• Lab 12. Grundläggande applikation för en sida med hjälp av routerlab 13. Bygg en applikation för en sida (SPA)
• Lab 14. Avancerad HT TP-klient
• Lab 15. Använda Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Avancerad routing
• Labb 18. Enhetstestning
• Lab 19. Felsökning av vinkelapplikationer

VEM ÄR KURSEN FÖR?
Den här kursen vänder sig till alla som behöver lära sig grunderna i Angular 12-utveckling och tillämpa den för att skapa web ansökningar direkt. Vi kan också leverera och anpassa denna utbildning för större grupper – vilket sparar tid, pengar och resurser för din organisation.

FÖRUTSÄTTNINGAR
Web utvecklingserfarenhet med HTML, CSS och JavaScript krävs för att få ut det mesta av denna Angular-kurs. Kunskap om webbläsarens DOM är också användbart. Tidigare erfarenhet av Angular, med AngularJS eller någon version av Angular, krävs inte.
https://www.lumifywork.com/en-au/courses/angular-12-programming/