Angular är en TypeScript-utvecklingsplattform och ramverk som används för att skapa ensidiga applikationer.

Angular har en komplex historia. Utvecklarna använde JavaScript för att bygga den första versionen av detta ramverk (AngularJS). Angulardevelopers använde senare TypeScript för att bygga alla successiva versioner av Angular (på grund av antalet buggar i den första versionen).

Från och med 2021 är den senaste versionen av Angular 12.0. I den här artikeln lär du dig allt du behöver veta om Angularframework.

Vad är Angular?

Många människor beskriver Angularas ett ramverk, och även om denna definition inte är felaktig är Angular inte bara ett ramverk. Angular är också en utvecklingsplattform. Det betyder att den har ett hård- och mjukvarusystem som kör Angular-applikationer.

Även om det är byggt på TypeScript kan du skriva det mesta av plattformens kod i JavaScript. Liksom de flesta ramverk är Angular komponentbaserat. Detta innebär att varje sektion av ett Angular användargränssnitt behandlas som en oberoende enhet, vilket leder till skapandet av återanvändbar kod och skalbara applikationer.

För att använda Angular måste du vara bekant med HTML, CSS och JavaScript (att veta att TypeScript är en tillgång, men inte ett krav). Angularis jämförs ofta med VueJS och ReactJS, och ett av de främsta klagomålen är att Angular har en brantare inlärningskurva.

Relaterad: Vad är ReactJS och vad kan det användas till?

Detta är ingen överraskning, eftersom Angular (som är en utvecklingsplattform) har ett större antal kärnstrukturer för dig att bli bekant med. Dessa strukturer inkluderar:

• Moduler
• Komponenter
• Mallar

Och att förstå dessa kärnfunktioner säkerställer att du är på god väg att bli en Angular-utvecklare.

Utforska vinkelfiler

Angular-applikationen genererar många filer i din nya projektmapp (som du kan se i bilden nedan). Kontrollera Angulars officiella webbplats för instruktioner om hur du installerar Angular på din dator.

En av de viktigare filerna i huvudprojektmappen är package.json fil. Den här filen talar om namnet på ditt projekt, hur du startar ditt projekt (ng tjäna), hur man bygger ditt projekt (ng bygga), och hur du testar ditt projekt (ng test) bland annat.

Din huvudprojektmapp innehåller också två mappar—node_modules och src. De src mappen är där du ska göra all din utveckling; den innehåller flera filer och mappar.

src-mappen

De styles.css filen är där du kommer att lägga alla dina globala stylingpreferenser, och index.html fil är den enda sida som återges i din webbläsare.

Utforska filen index.html

Det enda du vill ändra i index.html filen ovan är titeln på ansökan. De taggen i texten i HTML-filen ovan länkar till app.component.ts fil, som finns i app-mappen (som du kan se på bilden nedan).

Utforska filen app.component.ts

importera {Component } från '@angular/core';
@Komponent({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportklass AppComponent {
title = 'min-app';
}

De app.component.ts filen använder app-root väljare, som finns i index.html filen ovan. Den använder app.component.html filen som en mall och app.component.css fil för stil.

De app.component.css filen är tom när den genereras eftersom alla stilinställningar, tillsammans med HTML-layouten, finns inom app.component.html fil.

Kör Angular-applikationen med ng servera --öppen kommandot kommer att visa följande i din webbläsare:

För att ändra vad som visas i din webbläsare måste du redigera app.component.html fil.

Ersätter innehållet i denna fil med följande kod:

Hej världen

Kommer att producera följande utdata i din webbläsare:

Förstå vinkelmoduler

Varje Vinkel applikationen är byggd på ett grundläggande modulsystem, känt som NgModules. Varje applikation innehåller minst en NgModule. Vinkel genererar två moduler från ng ny kommando (app-routing.module.ts och app.modul.ts).

De app.modul.ts filen innehåller rotmodulen, som måste finnas för att programmet ska köras.

Utforska filen app.module.ts

importera { NgModule } från '@angular/core';
importera { BrowserModule } från '@angular/platform-browser';
importera { AppRoutingModule } från './app-routing.module';
importera { AppComponent } från './app.component';
@NgModule({
deklarationer: [
AppComponent
],
importer: [
BrowserModule,
AppRoutingModule
],
leverantörer: [],
bootstrap: [AppComponent]
})
exportklass AppModule { }

Filen ovan använder JavaScript importera uttalande för att importera NgModule, den BrowserModule, den AppComponent, och den AppRoutingModule (vilket är den andra NgModule i projektet).

De @NgModule dekoratör kommer efter importen. Det indikerar att app.modul.ts filen är verkligen en NgModule. De @NgModule decorator konfigurerar sedan flera arrayer: the deklarationer, den import, den leverantörer, och den bootstrap.

De deklarationer array lagrar komponenterna, direktiven och rören som hör till en specifik NgModule. Men i fallet med en rotmodul är det bara AppComponent lagras i deklaration array (som du kan se i koden ovan).

De import array importerar den andra NgModules som du använder i applikationen. De import arrayen i koden ovan importerar BrowserModule (vilket gör att den kan använda webbläsarspecifika tjänster, såsom DOM-rendering), och AppRoutingModule (vilket tillåter applikationen att använda Vinkel router).

Relaterad: The Hidden Hero of Websites: Understanding the DOM

De leverantörer array bör innehålla tjänster som komponenter i andra NgModules kan använda.

De bootstrap array är mycket viktig eftersom den innehåller ingångskomponenten som Angular skapar och infogar i index.html filen i huvudprojektmappen. Varje Angular-applikation startar från bootstrap array i roten NgModule förbi bootstrapping de NgModule (vilket involverar en process som infogar varje komponent i bootstrap array i webbläsarens DOM).

Förstå vinkelkomponenter

Varje Angular-komponent genereras med fyra specifika filer. Om du tittar på appmappbilden ovan ser du följande filer:

• app.component.css (en CSS-fil)
• app.component.html (en mallfil)
• app.component.spec.ts (en testspecifikationsfil)
• app.component.ts (en komponentfil)

Alla filerna ovan är associerade med samma komponent. Om du använder ng generera kommandot för att generera en ny komponent, kommer fyra liknande filer som de ovan att genereras. De app.component.ts filen innehåller rotkomponent, som kopplar samman de olika aspekterna av komponenten (som mallen och stilen).

Utforska filen app.component.ts

importera { Component } från '@angular/core';
@Komponent({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportklass AppComponent {
title = 'min-app';
}

De app.component.ts filen använder JavaScript-importsatsen för att importera "Component" från Angulars kärna. Sedan @Komponent dekoratören identifierar klassen som en komponent. De @Komponent dekoratör innehåller ett föremål som består av en väljare, a mallUrl, och en styleUrls array.

De väljare berättar Vinkel för att infoga en instans av appkomponenten i en HTML-mall som har en tagg som motsvarar väljare (alltså märka). Och om du tittar tillbaka på koden i index.html filen ovan hittar du märka.

Huvudappens komponentfil länkar också till mallfilen med hjälp av mallUrl fast egendom. Det här är app.component.html fil, som beskriver hur en specifik komponent ska renderas i en Angular-applikation.

Den sista egenskapen i objektet är styleUrls. Den här egenskapen refererar till en mängd stilmallar, vilket innebär att du kan använda flera stilmallar på en enda komponent (så att du kan lägga till den globala stilmappen i src-mappen till styleUrls-arrayen som väl).

Förstå vinkelmallar

De app.component.html fil är ett exempel på en Angular mall. Den här filen är en HTML-fil såväl som en komponentfil (appkomponenten). Därför måste varje komponent ha en HTML-mall, helt enkelt för att den beskriver hur en komponent återges i DOM.

Vad kommer härnäst?

Att förstå DOM är ditt näst bästa drag. Att ta sig an Angular-plattformen och ramverket är utan tvekan utmanande. Det är dock möjligt, och med tanke på att Angular återger sina komponenter i DOM, är det ett annat bra drag att lära sig om DOM – när du försöker bemästra Angular.

The Hidden Hero of Websites: Understanding the DOM

Lär du dig webbdesign och behöver veta mer om dokumentobjektmodellen? Här är vad du behöver veta om DOM.

Läs Nästa

Om författaren