Angular Training (front end webbutveckling) - Blandad (Liveklassrum + eLearning)

- Introduktion

- Introduktion till TypeScript

- Introduktion till datatyper

- Let kontra Const

- Introduktion till funktioner

- Introduktion till parametrar

- Introduktion till klasser

- Angulars Historia

- Förstå Angular

- Sätt upp Angular-appen

- Grundläggande delar i Angular

- Observables

- Introduktion till reaktiva formulär

- Introduktion till serverkommunikation

- Angular-moduler

- Routermodul

- Funktionsmodul

- Delningsmodul

- Systematiskt arrangera komponenter i appen

- Introduktion till automatiserad testning

- Typer av automatiserade tester

- Introduktion till testverktyg

- Introduktion till testbädd

- Hantering av komponentberoenden

- RxJS - Observables

- Lärandemål

- Förklara responsiv webbdesign (RWD)

- Förstå Bootstrap Grid System

- Lär dig Bootstrap-komponenter

- Quiz

- Viktiga slutsatser

- Lärandemål

- Vad är en mallmodell?

- Hur Angular-bindning fungerar och typer av bindningar

- Förstå inbyggda direktiv i Angular

- Grunderna i Webpack och SystemJS

- Quiz

- Viktiga slutsatser

- Lärandemål

- Förstå beroendeinjektion (DI)

- Förstå DI-programmeringsgränssnitt

- Förklara en tjänst

- Beskriv hur man skapar en tjänst

- Förklara Injicering av en Tjänst

- Quiz

- Viktiga slutsatser

- Lärandemål

- Angular-direktiv

- Typer av Angular-direktiv

- Inbyggda Angular-direktiv

- Arbete med anpassade direktiv

- Quiz

- Viktiga slutsatser

- Lärandemål

- Vad är Pipe i Angular

- Förstå hur inbyggda pipes fungerar i Angular

- Förstå anpassade pipes i Angular

- Quiz

- Viktiga punkter

- Lärandemål

- Fördelar med Angular-formulär

- Mallstyrd Ansats

- Modellbaserat tillvägagångssätt

- Angular-formulärvalidering

- Quiz

- Viktiga slutsatser

- Lärandemål

- Förstå hur Angular bidrar till att uppnå enkelapplikationssidor (SPA) genom routing

- Definiera fördelarna med @NgModule

- Identifiera flera sätt att komma åt routes

- Förstå processen i routing cykeln

- Quiz

- Viktiga slutsatser

- Lärandemål

- Förstå hur man arbetar med RxJS

- Förstå Angulars interaktion med HTTP GET

- Beskriv processen för att skicka data till servern

- Förklara skillnaden mellan Promises och Observables

- Quiz

- Viktiga slutsatser

Bygg en produktlist webbapplikation i Angular

Implementera CRUD-funktionalitet i Angular och bygg en Angular-app med följande funktioner:

Produktformulär, produktlista, visa, radera och uppdatera produkter från listan.

- Kursöversikt

- Introduktion till enkelsidiga applikationer (SPA)

- Varför behöver vi Angular

- Konfigurera utvecklingsmiljön

- Arkitektur för Angular-applikationer

- Första Angular-appen

- Modulintroduktion och introduktion till TypeScript

- Förbereda miljön för att skriva TypeScript

- Variabeldeklarationer (var, let och const)

- Types - Primitiva types

- Types - Referens- och specialtypes

- Operatorer - Spread och Backticks

- Operatorer - Destrukturering och Rest

- Klasser

- Gränssnitt

- Pilkfunktioner

- Moduler

- Hämta

- Async eller wait

- Modulintroduktion och en översikt över Angular-moduler

- Vad är dekoratörer

- Angular-moduler och @NgModule-dekoratören

- Deklarationer

- Import och export

- Leverantörer, startkomponenter och ingångskomponenter

- Uppstartsprocess för Angular-applikation

- Modulintroduktion

- Angular-komponenter och @Component Decorator

- Skapa en Angular-komponent med Angular CLI och på StackBlitz

- Metadata för komponentdekoratör

- Vyinkapsling - Emulerad, ShadowDom, Ingen

- Datakoppling - Stränginterpolering

- Egendomsbindning

- Händelsebindning

- @Input och @Output egenskapsdekoratörer

- Tvåvägsdata bindning

- Attribut bindning

- Klass bindning

- Klass bindning

- Introduktion till LifecycleHooks in Angular

- Använda Lifecycle Hooks i Angular

- Visa Queries - Visa child, Visa children, Content Child, Content Children

- Ändra detekterings-mekanismen i Angular. ZoneJS, NgZones

- Introduktion till Routing

- Implementera Routing i en Angular-applikation

- Skapa en användarlista. Förbereder för child-routing

- Abstrahering av användarlänken till en separat komponent

- Implementering av Child Routes

- Sökvägsmatchning och route types

- Introduktion till route guards i Angular

- CanActivate och CanActivateChild-vakter i Angular

- CanDeactivate Guard i Angular

- Förhandsladdning av data för en komponent med Resolve

- Introduktion till avsnittet

- DI som ett mönster, DI som ett ramverk och typer av leverantörer

- Hierarkisk Dependency Injection

- Introduktion till tjänster i Angular

- Hämta data från ett Rest API med HttpClient

- CRUD-operationer med HttpClient, HttpParams och HttpHeaders

- Observables och Operators i Observables - Map, Retry, Catch

- BehaviorSubject och att dela data med BehaviorSubjects

- Introduktion till avsnittet

- Introduktion till Direktiv

- Inbyggda strukturella direktiv

- Inbyggda attribut-direktiv

- Skapa anpassade attribut-direktiv

- Skapa anpassade strukturella direktiv

- Introduktion till pipes i Angular

- Använda inbyggda pipes

- Skapa anpassade pipes i Angular

- Rena och orena pipes i Angular

- Återbesök Decorators

- Skapa anpassade Decorators i Angular

- Skapa en anpassad Lifecycle Hook klassloggar-dekoratör

- Skapa anpassad egenskaps-decorator i Angular

- Introduktion till avsnittet

- Typer av strategier för att bygga formulär i Angular

- Skapa långa Bootstrap-formulär snabbt med VS Code genom användandet av Emmet

- Lägga till FormControl(s) i ett mallstyrt formulär med ngModel-direktivet

- Att få JavaScript-objektrepresentationen av ett formulär med hjälp av ngForm-direktivet

- Inaktivera skicka-knappen i ett formulär med formulärets $invalid-flagga

- Att få JavaScript objekt-representationen av ett formulär i TypeScript-klassen

- Lägga till kryssrutor, radioknappar och rullgardinslistor i ditt mallstyrda formulär

- Skapa undersektioner i formuläret med hjälp av NgModelGroup-direktivet

- Steg för att implementera ett reaktivt formulär i Angular

- Skapa ett Bootstrap-formulär snabbt för vårt reaktiva formulär med Emmet

- Skapa ett reaktivt formulär i TypeScript Class och koppla det till mallen

- Lägga till valideringar i ett reaktivt formulär

- Dynamiskt lägga till eller ta bort FormControl(s) eller FormGroup(s) med FormArray(s)

- Lägga till synkroniserade anpassade valideringar i ditt reaktiva formulär

- Lägga till Async anpassade valideringar till ditt reaktiva formulär

- Återställa värdet på ett formulär

- Introduktion till avsnittet

- Skapa ett Angular CLI-projekt med SCSS som basstil

- Introducera Material Design Bootstrap i ditt Angular CLI-projekt

- Lägga till en navigeringsfält i din sidhuvud

- Lägger till knappar med Material Design

- Lägga till Cards

- Använda Material Design-rullgardinsmenyer och formulärinmatningar

- Introduktion av Angular Material i ditt Angular CLI-projekt, ovanpå MDB

- Lägger till radioknappar, skjutreglage, slider, förloppsindikator och spinner

- Introduktion till Firebase

- Skapa en app med hjälp av Firebase-konsolen

- Sätt upp ditt Angular CLI projekt för att supporta Firebase

- Interagera med Firebase Realtime Database, med hjälp av metoder i AngularFireList

- Lägga till och läsa Data from Realtime Database i Firebase

- Uppdatera och radera Data från Realtime Database i Firebase