Angular-kursus (Frontend-udvikling) - e-læring

- Introduktion

- Introduktion til TypeScript

- Introduktion til datatyper

- Lad mod Konstant

- Introduktion til funktioner

- Introduktion til parametre

- Introduktion til klasser

- Historien om Angular

- Forståelse af Angular

- Opsæt Angular-applikation

- Angular Grundelementer

- Observables

- Introduktion til reaktive formularer

- Introduktion til serverkommunikation

- Angular-moduler

- Ruteringsmodul

- Funktionsmodul

- Delingsmodul

- Systematisk organisering af komponenterne i appen

- Introduktion til automatiseret testning

- Typer af automatiseret testning

- Introduktion til testværktøjer

- Introduktion til testmiljø

- Håndtering af komponentafhængigheder

- RxJS - Observables

- Læringsmål

- Forklar responsivt webdesign (RWD)

- Forstå Bootstrap Grid Systemet

- Lær Bootstrap-komponenter

- Quiz

- Vigtigste pointer

- Læringsmål

- Hvad er skabelonmodel?

- Hvordan databinding i Angular fungerer og typer af bindinger

- Forstå indbyggede direktiver i Angular

- Grundlæggende om Webpack og SystemJS

- Quiz

- Vigtigste pointer

- Læringsmål

- Forstå afhængighedsinjektion (DI)

- Forstå DI Applikationsprogrammeringsgrænseflade

- Forklar en tjeneste

- Beskriv hvordan man opretter en service

- Forklar indsprøjtning af en service

- Quiz

- Vigtigste pointer

- Læringsmål

- Angular-direktiver

- Typer af Angular-direktiver

- Indbyggede Angular-direktiver

- Arbejde med brugerdefinerede direktiver

- Quiz

- Vigtigste pointer

- Læringsmål

- Hvad er Pipe i Angular

- Forstå hvordan indbyggede pipes fungerer i Angular

- Forstå brugerdefinerede Angular pipes

- Quiz

- Vigtigste pointer

- Læringsmål

- Fordele ved Angular-formularer

- Skabelonbaseret tilgang

- Modeldrevet tilgang

- Angular-formvalidering

- Quiz

- Vigtigste pointer

- Læringsmål

- Forstå hvordan Angular hjælper med at opnå enkelsidesapplikationer ved hjælp af routing

- Definer fordelene ved @NgModule

- Identificer Flere Måder at Tilgå Ruter På

- Forstå processen i routingcyklussen

- Quiz

- Vigtigste pointer

- Læringsmål

- Forstå at arbejde med RxJS

- Forstå Angular-interaktion med HTTP GET

- Beskriv processen med at sende data til serveren

- Forklar forskellen mellem Promises og Observables

- Quiz

- Vigtigste pointer

Byg en produktliste webapplikation i Angular

Implementer CRUD-funktionalitet i Angular og byg en Angular-app med følgende funktioner:

Produktformular, produktliste, vis, slet og opdater produkter fra listen.

- Kursusoversigt

- Introduktion til single-page applikationer (SPA)

- Hvad har vi brug for Angular til

- Opsætning af udviklingsmiljøet

- Arkitektur af Angular-applikationer

- Første Angular App

- Modulintroduktion og introduktion til TypeScript

- Opsætning af miljøet til at skrive TypeScript

- Variabeldeklarationer (var, let og const)

- Typer - Primitive typer

- Typer - Reference- og specialtyper

- Operatorer - Spread og Backticks

- Operatorer - Destrukturering og Rest

- Klasser

- Grænseflade

- Pilefunktioner

- Moduler

- Hent

- Asynkron eller await

- Modulintroduktion og et overblik over Angular-moduler

- Hvad er dekoratører

- Angular-moduler og @NgModule-dekoratøren

- Udtalelser

- Import og eksport

- Udbydere, bootstrap og startkomponenter

- Opstartsproces for Angular-applikation

- Modulintroduktion

- Angular-komponenter og @Component-dekoratøren

- Oprettelse af en Angular-komponent ved brug af Angular CLI og på StackBlitz

- Metadata for komponentdekoration

- Visningsenkapsling - Emuleret, ShadowDom, Ingen

- Data binding - Strenginterpolering

- Egenskabsbinding

- Eventbinding

- @Input og @Output egenskabsdekoratører

- To-vejs databinding

- Attributbinding

- Klassebinding

- Klassebinding

- Introduktion til livscykluskroge i Angular

- Brug af livscyklushooks i Angular

- Vis forespørgsler - Vis barn, Vis børn, Indholds barn, Indholds børn

- Skift detektionsmekanismen i Angular. ZoneJS, NgZones

- Introduktion til routing

- Implementering af routing i en Angular-applikation

- Oprettelse af en brugerliste. Forberedelse til børnerouting

- Abstraktion af brugerlinket til en separat komponent

- Implementering af børneruter

- Sti Match og Rute Typer

- Introduktion til rutevagter i Angular

- CanActivate og CanActivateChild Guards i Angular

- CanDeactivate-vagt i Angular

- Forudindlæsning af data til en komponent ved brug af Resolve

- Introduktion til afsnit

- DI som et mønster, DI som et framework og typer af udbydere

- Hierarkisk afhængighedsinjektion

- Introduktion til services i Angular

- Hent data fra et Rest API ved hjælp af HttpClient

- CRUD-operationer ved brug af HttpClient, HttpParams og HttpHeaders

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

- BehaviorSubject og deling af data ved brug af BehaviorSubjects

- Introduktion til afsnit

- Introduktion til direktiver

- Indbyggede strukturelle direktiver

- Indbyggede attributdirektiver

- Opbygning af brugerdefinerede attributdirektiver

- Opbygning af brugerdefinerede strukturelle direktiver

- Introduktion til Pipes i Angular

- Brug af indbyggede pipes

- Oprettelse af brugerdefinerede pipes i Angular

- Rene og urene pipes i Angular

- Dekoratører gennemgået

- Opbygning af brugerdefinerede dekoratører i Angular

- Opbygning af en brugerdefineret livscykluskrog klasse logger dekoratør

- Opbygning af brugerdefineret egenskabsdekoration i Angular

- Introduktion til afsnit

- Typer af strategier til opbygning af formularer i Angular

- Oprettelse af lange Bootstrap-formularer hurtigt ved hjælp af VS Code og Emmet

- Tilføjelse af FormControl(s) til en skabelondrevet formular ved brug af ngModel-direktivet

- At få JavaScript-objektrepræsentationen af et formular ved hjælp af ngForm-direktivet

- Deaktivering af send-knappen på et formular ved brug af formulars $invalid-flag

- At få JavaScript-objektrepræsentationen af et formular i TypeScript-klassen

- Tilføjelse af afkrydsningsfelt, radioknapper og rulleliste til din skabelondrevne formular

- Oprettelse af underafsnit i formularen ved brug af NgModelGroup-direktivet

- Trin til implementering af et reaktivt formular i Angular

- Hurtigt at oprette et Bootstrap-formular til vores reaktive formular ved hjælp af Emmet

- Oprettelse af et reaktivt formular i TypeScript-klassen & tilkobling af det til skabelonen

- Tilføjelse af validering til en reaktiv formular

- Dynamisk tilføjelse eller fjernelse af FormControl(s) eller FormGroup(s) ved brug af FormArray(s)

- Tilføjelse af synkrone brugerdefinerede valideringer til din reaktive formular

- Tilføjelse af asynkrone brugerdefinerede valideringer til din reaktive formular

- Nulstilling af værdien for et formular

- Introduktion til afsnit

- Creating an Angular CLI Project with SCSS as a base style

- Introducing Material Design Bootstrap into your Angular CLI Project

- Adding a Navbar in your header

- Adding Material Design Buttons

- Adding Cards

- Using Material Design Dropdowns and Form Inputs

- Introducing Angular Material into your Angular CLI Project on the top of MDB

- Adding Radio Buttons, Slide Toggle, Slider, Progress Bar, and Spinner

- Introduction to Firebase

- Creating an App using the Firebase Console

- Setting up your Angular CLI Project to support Firebase

- Interacting with Firebase Realtime Database using methods on AngularFireList

- Adding and Reading Data from Realtime Database in Firebase

- Updating and Deleting Data from Realtime Database in Firebase