Angular er en TypeScript-udviklingsplatform og -ramme, der bruges til at skabe enkeltsides applikationer.

Angular har en kompleks historie. Udviklerne brugte JavaScript til at bygge den første version af denne ramme (AngularJS). Angular-udviklerne brugte senere TypeScript til at bygge alle de efterfølgende versioner af Angular (på grund af antallet af fejl i den første version).

Fra 2021 er den seneste version af Angular 12.0. I denne artikel lærer du alt, hvad du behøver at vide om Angularframework.

Hvad er Angular?

Mange mennesker beskriver Angularas en ramme, og selvom denne definition ikke er forkert, er Angular ikke bare en ramme. Angular er også en udviklingsplatform. Det betyder, at den har et hardware- og softwaresystem, som kører Angular-applikationer.

Selvom det er bygget på TypeScript, kan du skrive det meste af platformens kode i JavaScript. Som de fleste frameworks er Angular komponentbaseret. Det betyder, at hver sektion af en Angular-brugergrænseflade behandles som en uafhængig enhed, hvilket fører til oprettelsen af ​​genbrugelig kode og skalerbare applikationer.

For at bruge Angular skal du være fortrolig med HTML, CSS og JavaScript (ved at TypeScript er et aktiv, men ikke et krav). Angularis sammenlignes ofte med VueJS og ReactJS, og en af ​​hovedklagerne er, at Angular har en stejlere indlæringskurve.

Relaterede: Hvad er ReactJS, og hvad kan det bruges til?

Dette er ingen overraskelse, da Angular (som en udviklingsplatform) har et større antal kernestrukturer, som du kan blive fortrolig med. Disse strukturer omfatter:

• Moduler
• Komponenter
• Skabeloner

Og at forstå disse kernefunktioner vil sikre, at du er godt på vej til at blive en Angular-udvikler.

Udforskning af vinkelfiler

Angular-applikationen genererer mange filer i din nye projektmappe (som du kan se på billedet nedenfor). Tjek Angulars officielle hjemmeside for instruktioner om, hvordan du installerer Angular på din computer.

En af de mere vigtige filer i hovedprojektmappen er package.json fil. Denne fil fortæller dig navnet på dit projekt, hvordan du starter dit projekt (ng tjene), hvordan man bygger dit projekt (ng bygge), og hvordan du tester dit projekt (ng test) blandt andet.

Din hovedprojektmappe indeholder også to mapper—node_modules og src. Det src mappen er, hvor du vil lave al din udvikling; den indeholder flere filer og mapper.

src-mappen

Det styles.css fil er hvor du vil placere alle dine globale stylingpræferencer, og index.html fil er den enkelte side, der gengives i din browser.

Udforsker filen index.html

Det eneste, du ønsker at ændre i index.html ovenstående fil er titlen på ansøgningen. Det tag i brødteksten af ​​HTML-filen ovenfor links til app.component.ts fil, som er placeret i app-mappen (som du kan se på billedet nedenfor).

Udforsker app.component.ts-filen

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

Det app.component.ts fil bruger app-root vælger, som er placeret i index.html fil ovenfor. Den bruger app.component.html fil som skabelon og app.component.css fil for stil.

Det app.component.css filen er tom, når den genereres, fordi alle stilpræferencer sammen med HTML-layoutet er inden for app.component.html fil.

Kørsel af Angular-applikationen med ng server --åben kommando vil vise følgende i din browser:

For at ændre, hvad der vises i din browser, skal du redigere app.component.html fil.

Udskiftning af indholdet af denne fil med følgende kode:

Hej Verden

Vil producere følgende output i din browser:

Forstå vinkelmoduler

Hver Kantet applikationen er bygget på et grundlæggende modulsystem, kendt som NgModuler. Hver ansøgning indeholder mindst én NgModule. Kantet genererer to moduler fra ng nyt kommando (app-routing.modul.ts og app.modul.ts).

Det app.modul.ts filen indeholder rodmodulet, som skal være til stede, for at programmet kan køre.

Udforsker 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
],
import: [
Browsermodul,
AppRoutingModule
],
udbydere: [],
bootstrap: [AppComponent]
})
eksport klasse AppModule { }

Filen ovenfor bruger JavaScript importere erklæring om at importere NgModule, det Browsermodul, det AppComponent, og AppRoutingModule (som er det andet NgModule i projektet).

Det @NgModule dekoratør kommer efter importen. Det indikerer, at app.modul.ts filen er faktisk en NgModule. Det @NgModule decorator konfigurerer derefter flere arrays: den erklæringer, det import, det udbydere, og bootstrap.

Det erklæringer array gemmer de komponenter, direktiver og rør, der hører til en bestemt NgModule. I tilfælde af et rodmodul er det dog kun AppComponent er gemt i erklæring array (som du kan se i koden ovenfor).

Det import array importerer den anden NgModuler som du bruger i applikationen. Det import array i koden ovenfor importerer Browsermodul (som gør det muligt at bruge browserspecifikke tjenester, såsom DOM-gengivelse), og AppRoutingModule (som tillader applikationen at bruge Kantet router).

Relaterede: The Hidden Hero of Websites: Understanding the DOM

Det udbydere array skal indeholde tjenester, der komponenter i andre NgModuler kan bruge.

Det bootstrap array er meget vigtigt, fordi det indeholder den indgangskomponent, som Angular opretter og indsætter i index.html fil i hovedprojektmappen. Hver Angular-applikation starter fra bootstrap array i roden NgModule ved bootstrapping det NgModule (hvilket involverer en proces, der indsætter hver komponent i bootstrap array i browserens DOM).

Forstå vinkelkomponenter

Hver Angular-komponent genereres med fire specifikke filer. Hvis du tager et kig på app-mappen-billedet ovenfor, vil du se følgende filer:

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

Alle ovenstående filer er knyttet til den samme komponent. Hvis du bruger ng generere kommando for at generere en ny komponent, vil fire lignende filer som dem ovenfor blive genereret. Det app.component.ts filen indeholder rodkomponent, som forbinder de forskellige aspekter af komponenten (såsom skabelonen og stilen).

Udforsker 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';
}

Det app.component.ts fil bruger JavaScript-importerklæringen til at importere "Komponent" fra Angulars kerne. Derefter @Komponent dekoratør identificerer klassen som en komponent. Det @Komponent dekoratør indeholder en genstand bestående af en vælger, a skabelonUrl, og en styleUrls array.

Det vælger fortæller Kantet at indsætte en forekomst af app-komponenten i enhver HTML-skabelon, der har et tag svarende til vælger (så tag). Og hvis du kigger tilbage på koden i index.html filen ovenfor finder du tag.

Hovedapp-komponentfilen linker også til skabelonfilen ved hjælp af skabelonUrl ejendom. Dette er app.component.html fil, som beskriver, hvordan en specifik komponent skal gengives i en Angular-applikation.

Den endelige egenskab i objektet er styleUrls. Denne egenskab refererer til en række typografiark, hvilket betyder, at du kan anvende flere typografiark til en enkelt komponent (så du kan tilføje det globale typografiark i src-mappen til styleUrls-arrayet som godt).

Forstå vinkelskabeloner

Det app.component.html fil er et eksempel på en Angular skabelon. Denne fil er en HTML-fil såvel som en komponentfil (app-komponenten). Derfor skal hver komponent have en HTML-skabelon, simpelthen fordi den skitserer, hvordan en komponent gengives i DOM.

Hvad er det næste?

At forstå DOM er dit næste bedste træk. Det er utvivlsomt udfordrende at tage Angular-platformen og rammeværket til sig. Det er dog muligt, og i betragtning af at Angular gengiver dets komponenter i DOM, er det et andet godt træk at lære om DOM'et – mens du prøver at mestre Angular.

The Hidden Hero of Websites: Understanding the DOM

Lærer du webdesign og har du brug for at vide mere om dokumentobjektmodellen? Her er hvad du behøver at vide om DOM.

Læs Næste

Om forfatteren