Angular: Lær & Kod-appikon

Angular: Lær & Kod

Uddannelse · Gratis · iOS & Android · CoddyKit

Angular: Lær & Kod — Skriv en komponent, og se den blive gengivet live på din telefon

Angular: Lær & Kod er en gratis iOS- og Android-app til begyndere, studerende og udviklere med JavaScript-baggrund, som vil lære Angular på deres telefon. Dens live-arbejdsområde med tre paneler — component.ts, template.html og styles.css gengiver din kode, mens du skriver, og 38 kurser tager dig fra den første selvstændige komponent til signals, RxJS, NgRx og rendering på serversiden.

App Store — Download gratisGoogle Play — Download gratis
Pris
Gratis, Pro-opgradering
Platforme
iOS og Android
Sprog
22
Aldersgrænse
4+
Kræver
iOS 15.1 eller nyere
Startskærmen i Angular: Lær & Kod (arabisk grænseflade) med Angular Academy-kortet, det daglige mål, World Coding Challenge samt knapperne Ask Mentor, Generate Your Lesson og knapper til hurtige spørgsmålKursusforløbet Angular: Lær & Kod (arabisk grænseflade) med 144 lektioner og de første kurser Velkommen til Angular, Angular CLI og projektstruktur, Indbygget kontrolflow og Angular 19-grundprincipper
38Kurser, A1 til C1
LiveArbejdsområde med tre paneler
60TypeScript-kodningsopgaver
Ændr en værdi i klassen, og se templaten følge med.

Hele Angulars idé er, at et framework holder en komponents klasse, template og visning synkroniseret for dig. Arbejdsområdet gør det synligt på telefonens skærm: Redigér component.ts, så gengives forhåndsvisningen på ny. Det er den hurtigste måde virkelig at mærke, hvad dependency injection og signals gør, i stedet for blot at læse en definition af dem.

Hvad det er

Angular: Lær & Kod er en gratis uddannelsesapp til iOS og Android, som lærer dig Angular-frameworket fra den første selvstændige komponent og hele vejen gennem et komplet frontend-forløb. Det sker med et live-arbejdsområde med tre paneler (component.ts, template.html, styles.css) og en forhåndsvisning, der gengiver din kode, mens du skriver den. Dens 38 kurser dækker signals, RxJS, routing, forms, NgRx state management og rendering på serversiden samt 60 TypeScript-kodningsopgaver og en AI Mentor til alt det, der ikke giver mening.

Inde i appen

Sådan ser det ud

Startskærmen i Angular: Lær & Kod (arabisk grænseflade) med Angular Academy-kortet, det daglige mål, World Coding Challenge samt knapperne Ask Mentor, Generate Your Lesson og knapper til hurtige spørgsmål
HjemStartskærmen viser Angular-kursekortet med en startknap, dit niveau og daglige mål, World Coding Challenge samt knapperne Ask Mentor og Generate Your Lesson, som kan åbnes med ét tryk (vist her med den arabiske grænseflade).
Kursusforløbet Angular: Lær & Kod (arabisk grænseflade) med 144 lektioner og de første kurser Velkommen til Angular, Angular CLI og projektstruktur, Indbygget kontrolflow og Angular 19-grundprincipper
KursusforløbKursusforløbet indeholder 144 lektioner og begynder med Velkommen til Angular, Angular CLI og projektstruktur, Indbygget kontrolflow og Angular 19-grundprincipper, som alle er markeret som begynderkurser.
Første lektion i Angular: Lær & Kod (arabisk grænseflade) med korte forklaringskort og en note om AI Mentor-knappen
En lektionEn lektion begynder med korte kort, der hver forklarer én idé — her en introduktion til Angular — og slutter med en henvisning til AI Mentor-knappen, som er tilgængelig i alle lektioner.
AI chat screen asking How can I help you, with suggested prompts to explain key concepts, give tips, quiz you and create a learning roadmap
AI chatThe AI chat answers coding questions and starts from suggestions: explain the key concepts, share tips, quiz you or build a learning roadmap.
Coding Challenges screen with a challenge search, Join with Code, category filters and the active Angular course challenge
ChallengesCoding Challenges: search challenges, join a match with a code, filter by area and start one from your active Angular course.

Kurset

Det dækker Angular-kurset

38 kurser og 144 lektioner fra appens egen kursusliste — fra den første standalone component til signals, NgRx og server-side rendering.

  1. Komponenter og grundlæggende projektstruktur

    Velkommen til Angular, Angular CLI og projektstruktur, Angular 19-grundprincipper, Dybdegående gennemgang af Standalone Components, Indbygget kontrolflow, Komponentstyling og -indkapsling samt komponenternes livscyklushooks.

  2. Signals og reaktiv state

    Grundprincipper i Angular Signals, Signals: Computed og Effects, Signal Inputs og Queries, signalbaseret state management samt NgRx SignalStore — den aktuelle, anbefalede måde at gemme og udlede en komponents state på.

  3. Services, directives og templates

    Grundprincipper i Dependency Injection, Pipes: indbyggede og brugerdefinerede, tovejsbinding og modelinputs, Content Projection og Templates, Directive Composition API samt avancerede komponenter og directives.

  4. Routing og formularer

    Angular Routing og Navigation, avanceret Angular Router, arbejde med formularer, avancerede Reactive Forms samt brugerdefinerede form controls.

  5. RxJS og HTTP

    Grundprincipper i RxJS til Angular, RxJS-operatorer i dybden, HttpClient-interceptors samt HTTP- og API-integration — laget, der forbinder en komponent med en rigtig backend.

  6. State management og test

    State management med NgRx, Angular-unit- og komponenttest samt end-to-end-test af Angular.

  7. Ydeevne og produktion

    Change Detection og ydeevne, server-side rendering med Angular SSR, Hydration og ydeevne, Angular Animations, internationalisering (i18n), Micro Frontends med Module Federation, opbygning af Angular-biblioteker samt grundlæggende Angular-sikkerhed.

Sådan fungerer det

Sådan fungerer en session i arbejdsområdet

Hver lektion kombinerer en kort forklaring med det live-arbejdsområde, så det Angular-begreb, du lige har læst om, og koden, der bruger det, er på samme skærm i stedet for at blive til en separat øvelse senere.

  1. Læs om begrebet, og åbn derefter arbejdsområdet

    En kort lektion introducerer én idé — et signal, et direktiv eller en router guard — og giver dig derefter component.ts, template.html og styles.css side om side sammen med et forhåndsvisningspanel, der gengiver det, du skriver.

  2. Ændr koden, og se komponenten reagere

    Redigér en værdi i klassen, så opdateres templaten i forhåndsvisningen. Ødelæg en binding, så viser forhåndsvisningen præcis det. Det kan et statisk kodeeksempel ikke gøre, og derfor er kurset baseret på arbejdsområdet i stedet for tekstuddrag, man kun kan læse.

  3. Løs en TypeScript-opgave, og spørg, når du går i stå

    60 kodningsopgaver på tværs af tre sværhedsgrader følger efter lektionerne med hints og gennemarbejdede løsninger, hvis du går i stå med en opgave. Hvis noget stadig ikke giver mening — et signal, der ikke opdateres, eller en injected service, der kommer tilbage som undefined — forklarer AI Mentor det fra lektionens egen chatskærm.

Hvad det indeholder

Dette følger med appen

38

Kurser, A1 til C1

144 lektioner fordelt på 38 kurser, fra standalone components og signals til RxJS, forms, routing, NgRx state management, testning, rendering på serversiden og micro frontends.

Live

Arbejdsområde med tre paneler

component.ts, template.html og styles.css kan redigeres side om side, mens en forhåndsvisning gengiver din Angular-kode, efterhånden som du skriver den — kræver en forbindelse for at køre.

60

TypeScript-kodningsopgaver

Tre sværhedsgrader med hints og gennemarbejdede løsninger samt en Projects-fane med arbejdsområder med flere filer, guidede projektforløb og versionshistorik.

AI

AI-tutor (Pro)

Spørg om en fejl, et begreb eller din egen kode fra lektionens chatskærm. Pro tilføjer også en AI-lektionsgenerator til et emne, du specifikt endnu ikke forstår, samt en AI-playground, der omsætter en beskrevet side til kode.

Verden

World Coding Challenge

Ét fælles problem, hvor alles løsninger er synlige, sammen med streaks, XP, en rangliste og daglige påmindelser.

Certifikat

Gennemførelsesbevis

En afsluttende eksamen og et certifikat med dit navn på samt miniquizzer, flashcard-gennemgang og et cheatsheet på én side med syntaks, decorators og directives.

Baggrund

Hvad er Angular, og i hvilken rækkefølge lærer man det egentlig?

Angular er et frontend-framework, der vedligeholdes af Google og er skrevet i TypeScript. Det bruges til at bygge de interaktive singlepage-grænseflader i store webapps. I modsætning til et bibliotek, som du selv sammensætter, leveres Angular med en fastlagt samling dele: komponenter, en router, et forms-system, dependency injection og RxJS til strømme af hændelser. Den praktiske læringsrækkefølge er først komponenter og templates, derefter signals og services, så routing og forms og til sidst RxJS- og HTTP-laget, der kommunikerer med en rigtig backend.

Standalone componentbyggestenen

En selvstændig del af brugergrænsefladen — med sin egen klasse, template og styles — som erklærer sine egne afhængigheder i stedet for at være en del af et fælles modul. Moderne Angular-apps bygges som et træ af disse komponenter, og derfor starter kurset her i stedet for med ældre modulbaserede mønstre.

Signalden moderne måde at håndtere state på

En reaktiv værdi, der oprettes med signal(), og som alle dele af templaten kan læse. computed() udleder ét signal fra et andet, og effect() kører kode, når et signal ændres. Signals har erstattet meget af det manuelle arbejde med change detection og er nu den anbefalede måde at gemme en komponents state på.

Dependency injectionsådan forbindes delene

I stedet for at en komponent selv opretter de services, den har brug for, beder den om dem, hvorefter Angular leverer dem. Det er det begreb, begyndere oftest snubler over ved første møde, og det, der gør en stor kodebase testbar, fordi en rigtig service nemt kan udskiftes med en falsk service i en test.

RxJS og observablesdataflowet

Et bibliotek til værdier, der ankommer over tid i stedet for på én gang — HTTP-svar, route-parametre og input fra en formular, efterhånden som det ændrer sig. Angulars HttpClient og router returnerer observables direkte, så du får brug for et praktisk kendskab til operatorer som map og switchMap, uanset om du havde planlagt at lære dem.

Egnethed

Hvem det er til — og hvem det ikke er til

Det passer godt til dig, hvis du

  • Begynder du på Angular fra bunden og vil se en komponent reagere, før du lærer teorien bag den udenad
  • Kender du allerede JavaScript eller TypeScript og er du i gang med at lære dit første framework
  • Arbejder du med React eller Vue og skifter du til Angular på grund af et job, hvor du vil have terminologien oversat frem for at få det hele undervist fra bunden
  • Vil du have TypeScript-kodningsopgaver og et rigtigt arbejdsområde med et projekt fordelt på flere filer — ikke kun multiple choice-spørgsmål
  • Er du studerende eller skifter du karriere og forbereder dig til en jobsamtale som frontendudvikler

Det er ikke det rette værktøj, hvis du

  • Har du brug for, at arbejdsområdet fungerer helt uden forbindelse — liveforhåndsvisningen kræver specifikt en forbindelse
  • Forventer du, at alt er gratis: Det første kursus og arbejdsområdet er gratis, mens Pro låser resten op, inklusive AI-værktøjerne
  • Bygger du allerede Angular-apps til produktion og ønsker du dybdegående arkitektur- eller API-reference frem for et kursus
  • Har du brug for en akkrediteret kvalifikation — certifikatet dokumenterer gennemførelse og er ikke en formel uddannelseslegitimation

Spørgsmål

Ofte stillede spørgsmål

Hvad viser Angular-appens livearbejdsområde egentlig?

Tre redigerbare paneler — component.ts til TypeScript-klassen, template.html til markup og styles.css til styling — ved siden af en forhåndsvisning, der gengiver komponenten, mens du redigerer et af de tre paneler. Når du ændrer værdien af et signal i klassen og ser templaten opdatere med det samme, får du vist noget, som et statisk kodestykke i en bog ikke kan vise. Derfor er kurset bygget op omkring dette i stedet for eksempler, der kun skal læses.

Skal jeg kunne JavaScript eller TypeScript, før jeg lærer Angular?

Det hjælper at kunne noget JavaScript, men det er ikke en forudsætning, du skal opfylde først. Angular er skrevet i TypeScript, som er JavaScript med et typesystem, og kurset introducerer typeannoteringer og interfaces, efterhånden som de bliver relevante, i stedet for at antage, at du allerede kender dem. Angular: Lær & Kod begynder med en første standalone component og forklarer TypeScript undervejs.

Hvad er Angular signals, og hvorfor begynder kurset med dem?

Et signal er en reaktiv værdi, der oprettes med signal(), og som templaten læser direkte. computed() udleder et nyt signal fra eksisterende signaler, og effect() kører automatisk kode, når et signal, det afhænger af, ændres. Signals er den aktuelle, af Angular anbefalede måde at gemme en komponents state på og erstatter meget af det manuelle arbejde med change detection fra ældre versioner. Derfor ligger kurset Signals Fundamentals tidligt i forløbet i stedet for at være et avanceret emne.

Hvad er forskellen på Angular og React?

React er et rendering-bibliotek; du vælger selv router, formhåndtering, HTTP-client og state management omkring det. Angular er et komplet framework og leveres allerede med disse valg — komponenter, dependency injection, en router, RxJS og nu også indbyggede signals. React føles ofte lettere at komme i gang med, mens Angular føles tungere, men i et stort team ligner en Angular-kodebase mere andre Angular-kodebaser fra virksomhed til virksomhed. Det er en del af forklaringen på, at store organisationer fortsat bruger det.

Kan det stadig betale sig at lære Angular i 2026?

Ja, især hvis målet er at få arbejde og ikke blot at lave et sideprojekt. Angular bruges i stor udstrækning i store virksomheder og til enterprise-værktøjer, hvor den faste struktur, den indbyggede testunderstøttelse og den langsigtede supportplan betyder mere end nyhedsværdien. Derfor er jobopslag med Angular ofte stabile. Materialet om signals og SignalStore i dette kursus afspejler også, hvor frameworket faktisk har bevæget sig hen, frem for at være et forældet øjebliksbillede.

Hvor lang tid tager det at lære Angular godt nok til at bygge noget?

Regelmæssighed er vigtigere end det samlede timetal. Hvis du arbejder med korte daglige lektioner i arbejdsområdet, kan de fleste begyndere bygge og forbinde nogle få komponenter, sende data mellem dem med signals og kalde en API i løbet af nogle uger. Dependency injection, RxJS-operatorer og state management med NgRx er typisk de dele, der kræver en ekstra gennemgang, og kurset placerer dem efter det grundlæggende i stedet for at begynde med dem.

Findes Angular: Lær & Kod til iPhone og Android, og hvem er det til?

Angular: Lær & Kod fås til iPhone og iPad i App Store og til Android på Google Play. Grænsefladen findes på 22 sprog, og appen har en aldersvurdering på 4+. Den er til komplette begyndere, studerende, karriereskiftere og udviklere, der kan noget JavaScript og vil lære Angular som deres første framework eller skifte til det fra React eller Vue.

Er Angular: Lær & Kod gratis?

Appen kan downloades gratis fra App Store og Google Play. Det første kursus og livearbejdsområdet er gratis. Pro er den betalte opgradering: Den låser op for alle kurser, alle 60 kodningsopgaver samt AI-tutoren, lektionsgeneratoren og legepladsen og fjerner reklamer.

Virker liveforhåndsvisningen offline, i metroen eller i et fly?

Nej, ikke selve forhåndsvisningen — en livegengivelse af din komponent kræver en forbindelse, og det oplyser appen tydeligt i stedet for stille og roligt at levere en forringet oplevelse. Lektioner og læsemateriale indlæses stadig og fungerer på en ustabil forbindelse, men hvis du har brug for et arbejdsområde, der fungerer helt offline, kan denne apps liveforhåndsvisning ikke levere det.

Er denne app tilknyttet Google eller det officielle Angular-team?

Nej. Angular: Lær & Kod er et uafhængigt læringskursus fra CoddyKit og er hverken tilknyttet eller godkendt af Google eller Angular-teamet. Kurset underviser i frameworket, sådan som Google vedligeholder og udgiver det, men selve appen er et tredjepartskursus og ikke et officielt produkt.

Kom i gang

Byg din første Angular-komponent i dag

Gratis at komme i gang på iOS og Android på 22 sprog.

App Store — Download gratisGoogle Play — Download gratis
Senest gennemgået · Udgivet af CoddyKit · Privatlivspolitik
Tilgængelig på iOS og Android.