Angular er en TypeScript-utviklingsplattform og rammeverk som brukes til å lage enkeltsideapplikasjoner.

Angular har en kompleks historie. Utviklerne brukte JavaScript for å bygge den første versjonen av dette rammeverket (AngularJS). Angular-utviklerne brukte senere TypeScript for å bygge alle de påfølgende versjonene av Angular (på grunn av antall feil i den første versjonen).

Fra 2021 er den nyeste versjonen av Angular 12.0. I denne artikkelen lærer du alt du trenger å vite om Angularframework.

Hva er Angular?

Mange mennesker beskriver Angularas et rammeverk, og selv om denne definisjonen ikke er feil, er Angular ikke bare et rammeverk. Angular er også en utviklingsplattform. Dette betyr at den har et maskinvare- og programvaresystem som kjører Angular-applikasjoner.

Selv om det er bygget på TypeScript, kan du skrive det meste av plattformens kode i JavaScript. Som de fleste rammeverk er Angular komponentbasert. Dette betyr at hver del av et Angular brukergrensesnitt behandles som en uavhengig enhet, noe som fører til opprettelse av gjenbrukbar kode og skalerbare applikasjoner.

For å bruke Angular, må du være kjent med HTML, CSS og JavaScript (å vite at TypeScript er en ressurs, men ikke et krav). Angularis sammenlignes ofte med VueJS og ReactJS, og en av hovedklagene er at Angular har en brattere læringskurve.

I slekt: Hva er ReactJS, og hva kan det brukes til?

Dette er ingen overraskelse, ettersom Angular (som en utviklingsplattform) har et større antall kjernestrukturer du kan bli kjent med. Disse strukturene inkluderer:

• Moduler
• Komponenter
• Maler

Og å forstå disse kjernefunksjonene vil sikre at du er på god vei til å bli en Angular-utvikler.

Utforsking av vinkelfiler

Angular-applikasjonen genererer mange filer i den nye prosjektmappen din (som du kan se på bildet nedenfor). Sjekk Angulars offisielle nettsted for instruksjoner om hvordan du installerer Angular på datamaskinen din.

En av de viktigste filene i hovedprosjektmappen er package.json fil. Denne filen forteller deg navnet på prosjektet ditt, hvordan du starter prosjektet (ng tjene), hvordan bygge prosjektet ditt (ng bygge), og hvordan du tester prosjektet ditt (ng test) blant annet.

Hovedprosjektmappen din inneholder også to mapper—node_modules og src. De src mappen er der du skal gjøre all utviklingen din; den inneholder flere filer og mapper.

src-mappen

De styles.css filen er der du legger alle dine globale stylingpreferanser, og index.html filen er enkeltsiden som gjengis i nettleseren din.

Utforsker filen index.html

Det eneste du vil endre i index.html filen ovenfor er tittelen på søknaden. De taggen i brødteksten til HTML-filen over linker til app.component.ts fil, som ligger i app-mappen (som du kan se på bildet nedenfor).

Utforsker app.component.ts-filen

importer {Component } fra '@angular/core';
@Komponent({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksport klasse AppComponent {
title = 'min-app';
}

De app.component.ts filen bruker app-root velgeren, som er plassert i index.html filen ovenfor. Den bruker app.component.html filen som en mal og app.component.css fil for stil.

De app.component.css filen er tom når den genereres fordi alle stilpreferansene, sammen med HTML-oppsettet, er innenfor app.component.html fil.

Kjøre Angular-applikasjonen med ng server --åpen kommandoen vil vise følgende i nettleseren din:

For å endre hva som vises i nettleseren din, må du redigere app.component.html fil.

Erstatter innholdet i denne filen med følgende kode:

Hei Verden

Vil produsere følgende utgang i nettleseren din:

Forstå vinkelmoduler

Hver Kantete applikasjonen er bygget på et grunnleggende modulsystem, kjent som NgModules. Hver applikasjon inneholder minst én NgModule. Kantete genererer to moduler fra ng nytt kommando (app-routing.module.ts og app.modul.ts).

De app.modul.ts filen inneholder rotmodulen, som må være til stede for at programmet skal kjøre.

Utforsker app.module.ts-filen

importer { NgModule } fra '@angular/core';
importer { BrowserModule } fra '@angular/platform-browser';
importer { AppRoutingModule } fra './app-routing.module';
importer { AppComponent } fra './app.component';
@NgModule({
erklæringer: [
AppComponent
],
importerer: [
nettlesermodul,
AppRoutingModule
],
leverandører: [],
bootstrap: [AppComponent]
})
eksport klasse AppModule { }

Filen ovenfor bruker JavaScript import uttalelse for å importere NgModule, den Nettlesermodul, den AppComponent, og AppRoutingModule (som er den andre NgModule i prosjektet).

De @NgModule dekoratør kommer etter importen. Det indikerer at app.modul.ts filen er faktisk en NgModule. De @NgModule decorator konfigurerer deretter flere arrays: the erklæringer, den import, den tilbydere, og Støvelhempe.

De erklæringer array lagrer komponentene, direktivene og rørene som tilhører en bestemt NgModule. Men i tilfelle av en rotmodul er det bare AppComponent er lagret i erklæring array (som du kan se i koden ovenfor).

De import array importerer den andre NgModules som du bruker i applikasjonen. De import array i koden ovenfor importerer Nettlesermodul (som lar den bruke nettleserspesifikke tjenester, for eksempel DOM-gjengivelse), og AppRoutingModule (som lar applikasjonen bruke Kantete ruter).

I slekt: The Hidden Hero of Websites: Forstå DOM

De tilbydere array skal inneholde tjenester som komponenter i andre NgModules kan bruke.

De Støvelhempe array er veldig viktig fordi den inneholder inngangskomponenten som Angular oppretter og setter inn i index.html fil i hovedprosjektmappen. Hver Angular-applikasjon starter fra Støvelhempe array i roten NgModule av bootstrapping de NgModule (som involverer en prosess som setter inn hver komponent i Støvelhempe array i nettleserens DOM).

Forstå vinkelkomponenter

Hver Angular-komponent genereres med fire spesifikke filer. Hvis du tar en titt på app-mappen-bildet ovenfor, vil du se følgende filer:

• app.component.css (en CSS-fil)
• app.component.html (en malfil)
• app.component.spec.ts (en testspesifikasjonsfil)
• app.component.ts (en komponentfil)

Alle filene ovenfor er knyttet til den samme komponenten. Hvis du bruker ng generere kommandoen for å generere en ny komponent, vil fire lignende filer som de ovenfor bli generert. De app.component.ts filen inneholder rotkomponent, som forbinder de forskjellige aspektene ved komponenten (som malen og stilen).

Utforsker app.component.ts-filen

importer { Component } fra '@angular/core';
@Komponent({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
eksport klasse AppComponent {
title = 'min-app';
}

De app.component.ts filen bruker JavaScript-importerklæringen til å importere "Component" fra Angulars kjerne. Og så @Komponent dekorator identifiserer klassen som en komponent. De @Komponent dekoratør inneholder en gjenstand som består av en velger, a templateUrl, og en styleUrls array.

De velger forteller Kantete for å sette inn en forekomst av appkomponenten i en HTML-mal som har en tag som tilsvarer velger (så stikkord). Og hvis du ser tilbake på koden i index.html filen ovenfor finner du stikkord.

Hovedapp-komponentfilen kobler også til malfilen ved å bruke templateUrl eiendom. Dette er app.component.html fil, som skisserer hvordan en spesifikk komponent skal gjengis i en Angular-applikasjon.

Den endelige egenskapen i objektet er styleUrls. Denne egenskapen refererer til en rekke stilark, noe som betyr at du kan bruke flere stilark på en enkelt komponent (slik at du kan legge til det globale stilarket i src-mappen til styleUrls-matrisen som vi vil).

Forstå vinkelmaler

De app.component.html fil er et eksempel på en Angular mal. Denne filen er en HTML-fil så vel som en komponentfil (app-komponenten). Derfor må hver komponent ha en HTML-mal, ganske enkelt fordi den skisserer hvordan en komponent gjengis i DOM.

Hva blir det neste?

Å forstå DOM er ditt neste beste trekk. Å ta fatt på Angular-plattformen og rammeverket er utvilsomt utfordrende. Det er imidlertid mulig, og gitt at Angular gjengir komponentene sine i DOM, er det å lære om DOM – mens du prøver å mestre Angular – et annet flott trekk.

The Hidden Hero of Websites: Forstå DOM

Lærer du webdesign og trenger å vite mer om dokumentobjektmodellen? Her er det du trenger å vite om DOM.

Les Neste

Om forfatteren