Angular 9 for begyndere - Sådan installeres din første app med Angular CLI

Angular er en af ​​de mest populære JavaScript-rammer oprettet og udviklet af Google. I de sidste par år har ReactJS vundet stor interesse og er blevet det mest populære moderne JS-bibliotek i branchen. Men dette betyder ikke, at kantet ikke længere er vigtigt.

Tværtimod er Angular den næstmest populære ramme efter React ifølge Google Trends (verdensomspændende):

Som frontend-udvikler har jeg arbejdet med Angular. Nu vil jeg gerne dække nogle vigtige funktioner i Angular i mine kommende artikler:

  • Del 1: Sådan installeres din første app med Angular CLI (i øjeblikket er du her)
  • Del 2: Vinkelkomponenter og strenginterpolering
  • Del 3 : Vinklede direktiver og rør
  • Del 4: Envejs databinding i vinkel
  • Del 5: Vinklet tovejs databinding med ngModel

I den første del af min Angular for Beginners-serie vil du lære, hvad Angular & Angular CLI er, og hvordan du installerer din første Angular-app ved hjælp af CLI.

Forudsætninger

Før du begynder at lære Angular, anbefaler jeg, at du bliver fortrolig med følgende sprog, hvis du ikke allerede er:

  • HTML, CSS
  • JavaScript / ES6
  • TypeScript

Hvis du foretrækker det, kan du se vejledningsvideoen nedenfor:

Hvad er kantet?

Angular er en JavaScript-ramme, der er udviklet og vedligeholdt af Google til opbygning af frontend-applikationer. Lad mig først forklare, hvad en ramme er ...

Hvad er en ramme?

En ramme er en komplet pakke med sine egne funktioner og biblioteker. En ramme har sine egne regler, du har ikke meget fleksibilitet, og projektet afhænger af den ramme, du bruger. Vinkel er et eksempel på en ramme.

Angular har udgivet i 2016, men før Angular var der AngularJS. Et af de mest stillede spørgsmål om Angular er, at hvad er forskellen mellem AngularJS og Angular?

AngularJS vs Angular

Disse 2 versioner af Angular forvirrer mange udviklere. AngularJS og Angular er helt forskellige rammer. Vinkelversioner (som 1, 1.2, 1.5 osv.) Kaldes Angular JS og startende fra version 2 og derover kaldes Angular.

  • Vinklet JS → versioner fra 1.x
  • Vinkel → version 2 og derover

Så Angular version 2 er en komplet omskrivning af AngularJS-rammen, og de nyere versioner (som 4,5,6 og så videre) er mindre ændringer af Angular version 2.

I denne artikelserie lærer du Angular 2+.

Hvad er Angular CLI?

CLI står for Command Line Interface. Angular har sin egen officielle CLI, der hjælper os med mange ting under udviklingsprocessen.

Angular CLI bruges til automatisering af operationer i Angular-projekter i stedet for at udføre dem manuelt. CLI støtter os, udviklere, i et Angular-projekt fra start til slut.

For eksempel kan Angular CLI bruges til:

  • Konfigurationer, miljøopsætning
  • Bygningskomponenter, tjenester, routing-system
  • Start, test og implementering af projektet
  • Installation af tredjepartsbiblioteker (som Bootstrap, Sass osv.)

og meget mere. Lad os nu se, hvordan vi installerer vores første Angular App ved hjælp af CLI trin for trin.

Trin 1: Installer NPM (Node Package Manager)

Først og fremmest har vi brug for Node js. NPM (node-pakkehåndtering, er en del af node js) er et værktøj til installation af tredjepartsbiblioteker og afhængigheder til vores projekt. Hvis du ikke har det endnu, kan du downloade og installere det herfra. Jeg har også forklaret det trin for trin på vejledningsvideoen.

Trin 2: Installer Angular CLI

Hvis du har node js installeret, er det næste trin at installere selve Angular CLI på din computer:

npm install -g @angular/cli

g står for global installation . Hvis du bruger -g senere, kan du bruge CLI i ethvert vinklet projekt på din computer.

Tip : Skriv ng vtil din kommandolinjegrænseflade (eller terminal) for at bekræfte din kantede version.

Trin 3: Opret et nyt kantet projekt

Når installationen er afsluttet, kan du bruge Angular CLI til at oprette et nyt Angular-projekt med følgende kommando:

ng new my-first-app

Denne kommando opretter et nyt Angular-projekt (opkaldt min første app, du kan bruge ethvert navn) med alle de nødvendige afhængigheder og filer. Du behøver ikke bekymre dig om noget, fordi CLI gør det automatisk for dig.

Trin 4: Kør appen

Efter installation af CLI og oprettelse af en ny Angular-app er det sidste trin at starte projektet. For at gøre det skal vi bruge følgende kommando:

ng serve -- open

Flaget "åben" åbner automatisk dit lokale browservindue.

Angular understøtter live server , så du kan se ændringerne i din lokale uden at opdatere din browsers side. For flere detaljer og opdateringer, se også den officielle dokumentation.

Konklusion

Så i den første del har vi lavet en introduktion til Angular, hvad CLI er, og hvordan du installerer din første Angular-app. I det andet indlæg vil du lære om vinkelkomponenter og strenginterpolation. Bliv hængende :)

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!