Angular Training (web development) - eLearning

Angular - Webbutveckling - eLearning

Denna Angular Certification Training Course hjälper dig att behärska front-end webbutveckling med Angular. Få fördjupad kunskap om Angular-koncept, till exempel att underlätta utvecklingen av webbapplikationer med en sida, beroendeinjektion, typskript, komponenter, direktiv, rör, formulär, routing och testning.

Funktioner i programmet:

• Kurs och material är på engelska
• 1 års tillgång till eLearning-plattformen för studier i egen takt 24/7
• Nybörjare - mellannivå för blivande webbutvecklare
• 20 timmars lärande i egen takt online
• 50 timmars studietid rekommenderas
• 2 projekt vid kursens slut
• Flexibilitet i att välja klasser
• Ingen tentamen för kursen men studenten kommer att få certifiering för avslutad utbildning

Förutsättningar:

Det finns inga förkunskaper för att ta denna Angular-certifieringskurs.

Målgrupp:

En Angular-certifieringskurs är idealisk för personer som vill bygga eller förbättra sina färdigheter i Angular, ett populärt JavaScript-ramverk för att bygga dynamiska webbapplikationer. Här är vem som kan dra mest nytta av det:

• UI-utvecklare
• Tekniska projektledare
• Full-stack webbutvecklare
• Specialister på kvalitetssäkring
• Studenter som vill lära sig front-end UI-utveckling

Viktiga inlärningsresultat:

I slutet av denna online Angular-utbildningskurs kommer du att kunna:

• Förstå utformningen av enkelsidiga applikationer och hur Angular underlättar deras utveckling
• Separera modell-, vy- och controllerlagren i din applikation och implementera dem med Angular
• Behärska Angular-uttryck, filter och scope
• Bygga Angular-formulär
• Skriva Angular-direktiv
• Enhetstest och end-to-end-test av dina Angular-applikationer
• Utveckla interaktiva och dynamiska UI med hjälp av Bootstrap

Kursens läroplan:

Läroplan i egen takt:

• Lektion 01 - Applikationer med en enda sida
• Översikt över kursen
• Introduktion till enkelsidiga applikationer (SPA)
• Vad behöver vi Angular för
• Konfigurera utvecklingsmiljön
• Arkitektur för Angular-applikationer
• Första Angular-appen

Lektion 02 - TypeScript och ESNext

• Modulintroduktion och introduktion till TypeScript
• Skapa en miljö för att skriva TypeScript
• Variabeldeklarationer (var, let och const)
• Typer - primitiver
• Typer - referens- och specialtyper
• Operatorer - Spread och Backticks
• Operatorer - Destruktur och Rest
• Klasser
• Gränssnitt
• Funktioner för pilar
• Moduler
• Hämta
• Asynkron eller await

Lektion 03 - Dekoratörer

• Modulintroduktion och en översikt av Angular-moduler
• Vad är dekoratorer
• Angular Modules och @NgModule-dekoratorn
• Deklarationer
• Import och export

• providers, bootstrap och ingångskomponenter
• Angular-applikationens bootstrap-mekanism

Lektion 04 - Komponentdekorator

• Modulens introduktion
• Angular-komponenter och @Component-dekoratorn
• Skapa en Angular-komponent med hjälp av Angular CLI och på StackBlitz
• Metadata för komponentdekoratorer
• Inkapsling av vy - Emulerad, ShadowDom, Ingen
• Databindning - Interpolation av strängar
• Bindning av egenskaper
• Händelsebindning
• Egenskapsdekoratorer för @Input och @Output
• Tvåvägs databindning
• Attributbindning
• Klass-bindning
• Klassbindning
• Introduktion till Lifecycle Hooks i Angular
• Använda livscykelkrokar i Angular
• View Queries - View Child, View Children, Content Child, Content Children
• Ändra detektionsmekanismen i Angular. ZoneJS, NgZones

Lektion 05 - Angular Routing

• Introduktion till Routing
• Implementering av Routing i en Angular-app
• Skapa en användarlista. Att sätta scenen för Child Routing
• Abstrahera användarlänken till en separat komponent
• Implementering av underordnade rutter
• Sökvägsmatchning och routingtyper
• Introduktion till Route Guards i Angular
• CanActivate- och CanActivateChild-guards i Angular
• CanDeactivate-skydd i Angular
• Prefetching av data för en komponent med Resolve

Lektion 06 - Injektion av beroenden

• Introduktion till avsnittet
• DI som ett mönster, DI som ett ramverk och olika typer av leverantörer
• Hierarkisk injicering av beroenden
• Introduktion till tjänster i Angular
• Hämta data från ett Rest API med hjälp av HttpClient
• CRUD-operationer med hjälp av HttpClient, HttpParams och HttpHeaders
• Observables och operatorer i Observables - Map, Retry, Catch
• Behavior Subject och datadelning med hjälp av Behavior Subjects

Lektion 07 - Djupdykning i direktiv

• Introduktion till avsnitt
• Introduktion till direktiv
• Inbyggda strukturella direktiv
• Inbyggda attributdirektiv
• Bygga anpassade attributdirektiv
• Bygga anpassade strukturella direktiv
• Introduktion till Pipes i Angular
• Använda inbyggda pipes
• Skapa egna pipes i Angular
• Rena och orena pipes i Angular
• Dekoratörer i repris
• Bygga egna dekoratorer i Angular
• Bygga en anpassad dekorator för klassloggare med livscykelkrok
• Bygga en egen egenskapsdekorator i Angular

Lektion 08 - Formulär i Angular

• Introduktion till avsnitt
• Typer av formulärbyggnadsstrategier i Angular
• Skapa långa Bootstrap-formulär snabbt med VS Code med hjälp av Emmet
• Lägga till FormControl(s) till ett malldrivet formulär med hjälp av ngModel-direktivet
• Få en JavaScript-objektrepresentation av ett formulär med hjälp av ngForm-direktivet
• Inaktivera Submit-knappen i ett formulär med hjälp av formulärets $invalid-flagga
• Hämta en JavaScript-objektrepresentation av ett formulär i TypeScript-klassen
• Lägga till kryssrutor, radioknappar och urvalslistor i ditt mallstyrda formulär
• Skapa underavsnitt i formuläret med hjälp av NgModelGroup-direktivet
• Steg för att implementera ett reaktivt formulär i Angular
• Snabbt skapa ett Bootstrap-formulär för vårt reaktiva formulär med hjälp av Emmet
• Skapa ett reaktivt formulär i TypeScript-klassen och ansluta det till mallen
• Lägga till formulärvalideringar till ett reaktivt formulär
• Dynamiskt lägga till eller ta bort FormControl(s) eller FormGroup(s) med hjälp av FormArray(s)
• Lägga till synkrona anpassade valideringar till ditt reaktiva formulär
• Lägga till asynkrona anpassade valideringar i ditt reaktiva formulär
• Återställa värdet för ett formulär

Lektion 09 - Använda tredjepartsbibliotek

• Introduktion till avsnittet
• Skapa ett Angular CLI-projekt med SCSS som en basstil
• Introducera Material Design Bootstrap i ditt Angular CLI-projekt
• Lägga till ett navigeringsfält i sidhuvudet
• Lägga till knappar i materialdesign
• Lägga till kort
• Använda materialdesignade rullgardinsmenyer och formulärinmatningar
• Introducera Angular Material i ditt Angular CLI-projekt på toppen av MDB
• Lägga till radioknappar, skjutreglage, skjutreglage, framstegsfält och spinnare Introduktion till Firebase
• Skapa en app med hjälp av Firebase-konsolen
• Konfigurera ditt Angular CLI-projekt för att stödja Firebase
• Interagera med Firebase Realtime Database med hjälp av metoder i AngularFireList
• Lägga till och läsa data från realtidsdatabasen i Firebase
• Uppdatera och ta bort data från realtidsdatabasen i Firebase

Live virtuell klass läroplan:

Lektion 01 - Funktioner i TypeScript

• Introduktion till
• Introduktion till TypeScript
• Introduktion till datatyper
• Let vs. Const
• Introduktion till funktioner
• Introduktion till parametrar
• Introduktion till klasser

Lektion 02 - Funktioner i Angular

• Angulars historia
• Förståelse av Angular
• Konfigurera Angular App
• Angulära byggstenar
• Observerbara
• Introduktion till reaktiva formulär
• Introduktion till serverkommunikation

Lektion 03 - Ngmodul

• Angulära moduler
• Routing-modul
• Funktionsmodul
• Modul för delning
• Systematiskt arrangera komponenter i appen

Lektion 04 - Ng Enhetstestning och observerbara objekt

• Introduktion till automatiserad testning
• Typer av automatiserad testning
• Introduktion till testverktyg
• Introduktion till testbädd
• Hantering av komponentberoenden
• RxJS - Observabler

Lektion 05 - Bootstrap

• Lärandemål
• Förklara responsiv webbdesign (RWD)
• Förstå Bootstrap Grid System
• Lära sig Bootstrap-komponenter
• Frågesport
• Viktiga saker att ta med sig

Lektion 06 - Bindning och händelser

• Mål för inlärning
• Vad är en mallmodell?
• Hur Angular Binding fungerar och vilken typ av bindningar som finns
• Förstå Angular inbyggda direktiv
• Grunderna i Webpack och SystemJS
• Frågesport
• Viktiga saker att ta med sig

Lektion 07 - Beroendeinjektion och tjänster

• Mål för lärande
• Förstå beroendeinjektion (DI)
• Förstå DI:s gränssnitt för applikationsprogrammering
• Förklara en tjänst
• Beskriva hur man skapar en tjänst
• Förklara injicering av en tjänst
• Frågesport
• Viktiga saker att ta med sig

Lektion 08 - Direktiv

• Lärandemål
• Angular-direktiv
• Typer av Angular-direktiv
• Inbyggda Angular-direktiv
• Arbeta med anpassade direktiv
• Frågesport
• Viktiga saker att ta med sig

Lektion 09 - Pipes (rörledningar)

• Lärandemål
• Vad är Pipe i Angular
• Förstå hur inbyggda pipes fungerar i Angular
• Förstå Angular anpassade pipes
• Frågesport
• Viktiga saker att ta med sig

Lektion 10 - Formulär

• Lärandemål
• Fördelar med Angular-formulär
• Mall-drivet tillvägagångssätt
• Modell-drivet tillvägagångssätt
• Validering av angulära formulär
• Frågesport
• Viktiga saker att ta med sig

Lektion 11- Routning

• Lärandemål
• Förstå hur Angular hjälper till att uppnå SPA med hjälp av Routing
• Definiera fördelarna med @NgModule
• Identifiera flera sätt att komma åt routingar
• Förstå processen för routningscykeln
• Frågesport
• Viktiga saker att ta med sig

Lektion 12 - HTTP, löften och observerbara objekt

• Lärandemål
• Förstå hur man arbetar med RxJS
• Förstå Angular-interaktion med HTTP GET
• Beskriva processen för att skicka data till servern
• Förklara skillnaden mellan Promises och Observables
• Frågesport
• Viktiga saker att ta med sig

Kursens slutprojekt:

• Bygg en webbapp för en produktlista i Angular
• Implementera CRUD-funktionalitet i Angular och bygg en Angular-app med följande funktioner:
• Produktformulär, produktlista, visa, ta bort och uppdatera produkter från listan.