Angular: Lær & Kod-appikon

Angular: Lær & Kod

Utdanning · Gratis · iOS & Android · CoddyKit

Angular: Lær & Kod — Skriv en komponent og se den gjengis live på telefonen din

Angular: Lær & Kod er en gratis iOS- og Android-app for nybegynnere, studenter og utviklere med bakgrunn i JavaScript som vil lære Angular på telefonen. Den live arbeidsbenken med tre paneler — component.ts, template.html og styles.css gjengir koden mens du skriver, og 38 kurs tar deg fra den første standalone component til signals, RxJS, NgRx og server-side rendering.

App Store — Last ned gratisGoogle Play — Last ned gratis
Pris
Gratis, Pro-oppgradering
Plattformer
iOS og Android
Språk
22
Aldersgrense
4+
Krever
iOS 15.1 eller nyere
Startskjermen i Angular: Lær & Kod (arabisk grensesnitt) med Angular Academy-kortet, daglig mål, World Coding Challenge og knappene Ask Mentor, Generate Your Lesson og hurtigspørsmålAngular: Lær & Kod-kurssti (arabisk grensesnitt) med 144 leksjoner og de første kursene Welcome to Angular, Angular CLI and Project Structure, Built-in Control Flow og Angular 19 Fundamentals
38Kurs, A1 til C1
LiveArbeidsbenk med tre paneler
60TypeScript coding missions
Endre en verdi i klassen, og se hvordan templaten følger etter.

Hele poenget med Angular er at rammeverket holder komponentens klasse, template og visning synkronisert for deg. Arbeidsbenken gjør dette synlig på telefonskjermen: rediger component.ts, så gjengis forhåndsvisningen på nytt. Det er den raskeste måten å virkelig forstå hva dependency injection og signals gjør, i stedet for bare å lese en definisjon av dem.

Hva det er

Angular: Lær & Kod er en gratis utdanningsapp for iOS og Android som lærer deg Angular-rammeverket, fra en første standalone component til en komplett frontend-læringssti. Du bruker en live arbeidsbenk med tre paneler (component.ts, template.html, styles.css) og en forhåndsvisning som gjengir koden mens du skriver den. De 38 kursene dekker signals, RxJS, routing, forms, NgRx state management og server-side rendering, med 60 TypeScript coding missions og en AI Mentor for alt som ikke faller på plass.

Inne i appen

Slik ser den ut

Startskjermen i Angular: Lær & Kod (arabisk grensesnitt) med Angular Academy-kortet, daglig mål, World Coding Challenge og knappene Ask Mentor, Generate Your Lesson og hurtigspørsmål
HjemStartskjermen viser Angular-kurset med en startknapp, nivået ditt og det daglige målet ditt, World Coding Challenge samt knappene Ask Mentor og Generate Your Lesson, som kan trykkes på med ett trykk (vist her med arabisk grensesnitt).
Angular: Lær & Kod-kurssti (arabisk grensesnitt) med 144 leksjoner og de første kursene Welcome to Angular, Angular CLI and Project Structure, Built-in Control Flow og Angular 19 Fundamentals
KursstiKursstien inneholder 144 leksjoner og starter med Welcome to Angular, Angular CLI and Project Structure, Built-in Control Flow og Angular 19 Fundamentals, alle merket Beginner.
Den første leksjonen i Angular: Lær & Kod (arabisk grensesnitt), med korte forklaringskort og et notat om AI Mentor-knappen
En leksjonEn leksjon starter med korte kort som hver forklarer én idé – her en introduksjon til Angular – og avsluttes med en henvisning til AI Mentor-knappen, som er tilgjengelig i hver leksjon.
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

Dette dekker Angular-kurset

38 kurs og 144 leksjoner hentet fra appens egen kursliste – fra den første standalone component til signals, NgRx og server-side rendering.

  1. Komponenter og grunnleggende prosjektforståelse

    Welcome to Angular, Angular CLI and Project Structure, Angular 19 Fundamentals, Standalone Components Deep Dive, Built-in Control Flow, Component Styling and Encapsulation og Component Lifecycle Hooks.

  2. Signals og reaktiv tilstand

    Angular Signals Fundamentals, Signals: Computed and Effects, Signal Inputs and Queries, Signal-Based State Management og NgRx SignalStore – den moderne, anbefalte måten å lagre og utlede komponenttilstand på.

  3. Tjenester, direktiver og maler

    Dependency Injection Basics, Pipes: Built-in and Custom, Two-Way Binding and Model Inputs, Content Projection and Templates, Directive Composition API og Advanced Components and Directives.

  4. Routing og skjemaer

    Angular Routing and Navigation, Angular Router Advanced, Working with Forms, Reactive Forms Advanced og Custom Form Controls.

  5. RxJS og HTTP

    RxJS Fundamentals for Angular, RxJS Operators in Depth, HttpClient Interceptors og HTTP and API Integration – laget som kobler en komponent til en ekte backend.

  6. Tilstandshåndtering og testing

    State Management with NgRx, Angular Unit and Component Testing og End-to-End Testing for Angular.

  7. Ytelse og produksjon

    Change Detection and Performance, Server-Side Rendering with Angular SSR, Hydration and Performance, Angular Animations, Internationalization (i18n), Micro Frontends with Module Federation, Building Angular Libraries og Angular Security Essentials.

Slik fungerer det

Slik fungerer en økt i arbeidsbenken

Hver leksjon kombinerer en kort forklaring med den live arbeidsbenken, slik at Angular-konseptet du nettopp leste om og koden som bruker det, vises på samme skjerm i stedet for i en separat øvelse senere.

  1. Les om konseptet, og åpne deretter arbeidsbenken

    En kort leksjon introduserer én idé — et signal, en directive eller en router guard — og gir deg deretter component.ts, template.html og styles.css side om side, med et forhåndsvisningspanel som gjengir alt du skriver.

  2. Endre koden og se hvordan komponenten reagerer

    Rediger en verdi i klassen, så oppdateres templaten i forhåndsvisningen; bryt en binding, så viser forhåndsvisningen nøyaktig det. Dette er noe et statisk kodeeksempel ikke kan gjøre, og derfor baserer kurset seg på arbeidsbenken i stedet for bare tekstutdrag med kode.

  3. Jobb med et TypeScript-oppdrag, og spør når du står fast

    60 coding missions på tre vanskelighetsnivåer følger leksjonene, med hint og gjennomarbeidede løsninger hvis du står fast på et oppdrag. For alt som fortsatt ikke gir mening — et signal som ikke oppdateres, eller en injisert service som returnerer undefined — forklarer AI Mentor det fra leksjonens egen chat-skjerm.

Hva den inneholder

Dette følger med appen

38

Kurs, A1 til C1

144 leksjoner fordelt på 38 kurs, fra standalone components og signals til RxJS, forms, routing, NgRx state management, testing, server-side rendering og micro frontends.

Live

Arbeidsbenk med tre paneler

component.ts, template.html og styles.css kan redigeres side om side, med en forhåndsvisning som gjengir Angular-koden mens du skriver — krever en tilkobling for å kjøre.

60

TypeScript coding missions

Tre vanskelighetsnivåer med hint og gjennomarbeidede løsninger, samt en Projects-fane med arbeidsområder med flere filer, veiledede prosjektstier og versjonshistorikk.

AI

AI-lærer (Pro)

Spør om en feil, et konsept eller din egen kode fra leksjonens chat-skjerm; Pro gir også en AI-leksjonsgenerator for et tema du fortsatt ikke helt forstår, samt en AI-playground som bygger en beskrevet side om til kode.

Verden

World Coding Challenge

Én felles oppgave der alles løsninger er synlige, sammen med streaks, XP, en poengtavle og daglige påminnelser.

Sertifikat

Fullføringssertifikat

En avsluttende eksamen og et sertifikat med navnet ditt på, i tillegg til miniquizer, repetisjon med flashcards og et jukseark på én side med syntaks, decorators og directives.

Bakgrunn

Hva er Angular, og i hvilken rekkefølge lærer man det egentlig?

Angular er et frontend-rammeverk som vedlikeholdes av Google og er skrevet i TypeScript. Det brukes til å bygge interaktive single-page-grensesnitt for store webapplikasjoner. I motsetning til et bibliotek som du setter sammen selv, leveres Angular med et fastsatt sett med byggeklosser: components, en router, et forms-system, dependency injection og RxJS for strømmer av hendelser. I praksis lærer man først components og templates, deretter signals og services, så routing og forms, og til slutt RxJS- og HTTP-laget som kommuniserer med en ekte backend.

Standalone componentbyggeklossen

En selvstendig del av grensesnittet — med egen klasse, template og styles — som erklærer sine egne avhengigheter i stedet for å tilhøre en shared module. Moderne Angular-apper bygges som et tre av slike komponenter, og derfor starter kurset her i stedet for med eldre module-baserte mønstre.

Signalden moderne måten å håndtere state på

En reaktiv verdi opprettet med signal() som alle deler av templaten kan lese; computed() utleder ett signal fra et annet, og effect() kjører kode når et signal endres. Signals har erstattet mye manuelt arbeid med change detection og er nå den anbefalte måten å lagre state i en komponent på.

Dependency injectionslik kobles delene sammen

I stedet for at en komponent oppretter tjenestene den trenger, ber den om dem, og Angular leverer dem. Dette er konseptet nybegynnere oftest snubler over ved første møte, og det som gjør en stor kodebase testbar, fordi en ekte service enkelt kan byttes ut med en falsk service i en test.

RxJS og observablesdataflyten

Et bibliotek for verdier som kommer over tid, i stedet for på én gang — HTTP-svar, route-parametere og skjemadata etter hvert som de endres. Angulars HttpClient og router returnerer observables direkte, så du får bruk for operatorer som map og switchMap enten du hadde planlagt å lære dem eller ikke.

Passer

Hvem den er for – og ikke for

Passer godt for deg hvis du

  • Starter du med Angular fra grunnen av og vil se en komponent reagere før du pugger teorien bak?
  • Kan du allerede JavaScript eller TypeScript og skal lære ditt første rammeverk?
  • Jobber du med React eller Vue og går over til Angular for å få jobb, og vil lære ordforrådet i stedet for å få alt forklart på nytt fra grunnen av?
  • Vil du ha TypeScript-oppdrag og et ekte prosjektarbeidsområde med flere filer, ikke bare flervalgsoppgaver?
  • Er du student eller bytter karriere og forbereder deg til et intervju for en frontendutviklerstilling?

Ikke riktig verktøy for deg hvis du

  • Trenger du at arbeidsbenken fungerer helt uten forbindelse – live-forhåndsvisningen trenger spesifikt en forbindelse
  • Forventer du at alt skal være gratis? Det første kurset og arbeidsbenken er gratis, mens Pro låser opp resten, inkludert AI-verktøyene
  • Bygger du allerede Angular-apper for produksjon og ønsker grundig arkitektur- eller API-referansemateriale i stedet for et kurs?
  • Trenger du en akkreditert kvalifikasjon? Sertifikatet dokumenterer fullføring, men er ikke en formell kvalifikasjon

Spørsmål

Ofte stilte spørsmål

Hva viser Angular-appens live-arbeidsbenk egentlig?

Tre redigerbare paneler – component.ts for TypeScript-klassen, template.html for markeringen og styles.css for stilsettingen – ved siden av en forhåndsvisning som gjengir komponenten mens du redigerer en av de tre. Når du endrer verdien til et signal i klassen og ser malen oppdateres umiddelbart, får du se noe et statisk kodeeksempel i en bok ikke kan vise. Derfor er kurset bygget rundt dette, ikke rundt eksempler som bare skal leses.

Må jeg kunne JavaScript eller TypeScript før jeg lærer Angular?

Det er nyttig å kunne litt JavaScript, men det er ikke et krav du må oppfylle først. Angular er skrevet i TypeScript, som er JavaScript med et typesystem lagt til, og kurset introduserer typeannotasjoner og grensesnitt etter hvert som de dukker opp, i stedet for å anta at du allerede kjenner dem. Angular: Lær & Kod starter med en første standalone component og forklarer TypeScript underveis.

Hva er Angular-signaler, og hvorfor starter kurset med dem?

Et signal er en reaktiv verdi som opprettes med signal(), og som malen leser direkte. computed() utleder et nytt signal fra eksisterende signaler, mens effect() kjører kode automatisk når et signal det avhenger av, endres. Signals er den moderne, Angular-anbefalte måten å lagre komponenttilstand på, og erstatter mye av det manuelle arbeidet med endringsdeteksjon fra eldre versjoner. Derfor ligger kurset Signals Fundamentals tidlig i kursstien, ikke som et avansert tema.

Hva er forskjellen mellom Angular og React?

React er et bibliotek for gjengivelse; du velger selv router, skjemahåndtering, HTTP-klient og tilstandshåndtering rundt det. Angular er et komplett rammeverk og leveres med disse valgene ferdig – komponenter, dependency injection, en router, RxJS og nå også signals. React føles ofte lettere å komme i gang med, mens Angular føles tyngre. I et stort team vil imidlertid en Angular-kodebase ligne mer på kodebaser fra andre selskaper, og det er en del av grunnen til at store organisasjoner fortsatt bruker det.

Er det fortsatt verdt å lære Angular i 2026?

Ja, særlig hvis målet er å få jobb og ikke bare lage et sideprosjekt. Angular brukes mye i store selskaper og innen bedriftsverktøy, der den tydelige strukturen, den innebygde teststøtten og den langsiktige støttestrategien betyr mer enn nyhetsverdien. Derfor pleier stillingsannonser for Angular å være stabile. Materialet om signals og SignalStore i dette kurset gjenspeiler også hvor rammeverket faktisk har beveget seg, og ikke et utdatert øyeblikksbilde.

Hvor lang tid tar det å lære Angular godt nok til å bygge noe?

Regelmessighet betyr mer enn det totale antallet timer. Når de fleste nybegynnere jobber med korte daglige leksjoner i arbeidsbenken, kan de bygge og koble sammen noen komponenter, sende data mellom dem med signals og koble til et API i løpet av noen uker. Dependency injection, RxJS-operatorer og NgRx-tilstandshåndtering er delene som vanligvis trenger en ny gjennomgang, og kurset tar dem etter det grunnleggende i stedet for å begynne med dem.

Finnes Angular: Lær & Kod på iPhone og Android, og hvem passer appen for?

Angular: Lær & Kod er tilgjengelig for iPhone og iPad i App Store og for Android på Google Play, med grensesnitt på 22 språk og aldersgrense 4+. Den passer for nybegynnere uten forkunnskaper, studenter, karrierebyttere og utviklere som kan litt JavaScript og vil lære Angular som sitt første rammeverk eller gå over til det fra React eller Vue.

Er Angular: Lær & Kod gratis?

Appen kan lastes ned gratis fra App Store og Google Play. Det første kurset og live-arbeidsbenken er gratis. Pro er den betalte oppgraderingen: Den låser opp alle kursene, alle 60 kodeoppdragene og AI-veilederen, leksjonsgeneratoren og lekeplassen, og fjerner reklame.

Fungerer live-forhåndsvisningen uten nett, på T-banen eller på et fly?

Nei, ikke selve forhåndsvisningen – gjengivelse av komponenten live krever en forbindelse. Det opplyser appen tydelig i stedet for å fungere dårligere uten at du får vite hvorfor. Leksjoner og lesemateriale lastes fortsatt inn og fungerer ved ustabil forbindelse, men hvis du trenger en arbeidsbenk som fungerer helt uten nett, tilbyr ikke denne appen det med live-forhåndsvisningen.

Er denne appen tilknyttet Google eller det offisielle Angular-teamet?

Nei. Angular: Lær & Kod er et uavhengig læringskurs fra CoddyKit og er ikke tilknyttet eller godkjent av Google eller Angular-teamet. Det lærer bort rammeverket slik Google vedlikeholder og publiserer det, men selve appen er et tredjepartskurs og ikke et offisielt produkt.

Kom i gang

Bygg din første Angular-komponent i dag

Gratis å komme i gang på iOS og Android, på 22 språk.

App Store — Last ned gratisGoogle Play — Last ned gratis
Sist gjennomgått · Utgitt av CoddyKit · Personvernerklæring
Tilgjengelig på iOS og Android.