Vinklet kommandolinjegrænseflade forklaret

Vinkel er tæt forbundet med kommandolinjegrænsefladen (CLI). CLI strømliner genereringen af ​​Angular-filsystemet. Det handler om det meste af konfigurationen bag kulisserne, så udviklere kan begynde at kode. CLI har også en lav indlæringskurve, der kan anbefales til enhver nybegynder, der ønsker at hoppe lige ind. Heck, selv erfarne kantede udviklere er afhængige af CLI!

Installation

Angular CLI kræver Node.js og Node Packet Manager (NPM). Du kan kontrollere, om disse programmer med terminalen kommando: node -v; npm -v. Når det er installeret, skal du åbne en terminal og installere Kantet CLI med denne kommando: npm install -g @angular/cli. Dette kan udføres hvor som helst på dit system. CLI er konfigureret til global brug med -gflag.

Kontroller CLI er der med kommandoen: ng -v. Dette udsender flere informationslinjer. En af disse linjer angiver versionen af ​​den installerede CLI.

Genkend det nger den grundlæggende byggesten i CLI. Alle dine kommandoer begynder med ng. Tid til at kigge på fire af de mest almindelige kommandoer, der er forud for ng.

Nøglekommandoer

  • ng nyt
  • ng server
  • ng generere
  • ng build
  • ng opdatering

Nøgleordene for hver af disse er ret fortællende. Sammen består de af, hvad du har brug for for at ramme jorden med Angular. Selvfølgelig er der mange flere. Alle kommandoer er beskrevet i CLIs GitHub Documentation1. Du vil sandsynligvis opdage, at de ovennævnte kommandoer dækker de nødvendige baser.

ng nyt

ng newopretter et nyt kantet filsystem. Dette er en surrealistisk proces. Naviger til en filplacering, der er ønskelig for generering af nye applikationer. Skriv denne kommando som følger, erstatter [name-of-app]med hvad du vil: ng new [name-of-app].

Et filsystem under mappen [name-of-app]skal vises. Du er velkommen til at udforske, hvad der ligger indeni. Prøv ikke at foretage nogen ændringer endnu. Alt hvad du har brug for til at køre din første Angular-applikation, pakkes sammen i dette genererede filsystem.

ng server

For at få applikationen til at køre, skal ng servekommandoen udføres i [name-of-app]mappen. Overalt i mappen vil gøre. Den kantede CLI skal anerkende, at den er i et miljø, der genereres med ng new. Det kører forudsat denne ene betingelse. Gå videre og prøve det: ng serve.

Applikationen kører som standard på port 4200. Du kan se applikationen Angular ved at navigere til localhost:4200i enhver webbrowser. Vinkel fungerer på tværs af alle browsere. Medmindre du bruger en gammel version af Internet Explorer, vises applikationen. Det viser det officielle kantede logo sammen med en liste over nyttige links.

Okay, applikationen kører. Det fungerer forhåbentlig, men du skal vide, hvad der foregår under emhætten. Se tilbage til [name-of-app]filsystemet. Naviger [name-of-app] -> src -> app. Deri ligger de filer, der er ansvarlige for det, du så på localhost:4200.

ng generere

De .componentfiler definerer en Angular komponent herunder dens logik ( .ts), typografi ( .css), layout ( .html), og prøvning ( .spec.ts). Det app.module.tssærligt skiller sig ud. Sammen arbejder disse to grupper af filer sammen som componentog module. Både componentog moduleer to separate eksempler på Kantede Skema. Skemaer klassificerer de forskellige formålsdrevne kodeblokke, der kan genereres med ng generate.

Af hensyn til denne artikel skal du forstå, at en moduleeksporterer og importerer aktiver til og fra et underliggende komponenttræ. A componentvedrører sig selv med et afsnit af brugergrænsefladen. Enhedens logik, stil, layout og test forbliver indkapslet i de forskellige .componentfiler.

Hvad angår ng generate, kan denne kommando generere skelet til hver af de tilgængelige vinkelskemaer2. Naviger til [name-of-app -> src -> app]. Prøv at generere en ny componentved at udføre: ng generate component [name-of-component]. Udskift [name-of-component]med hvad du vil. En ny fil [name-of-component]dukker op sammen med de nødvendige componentfiler.

Du kan se, at ng generatefremskynder Angular's kedelpladekode. ng generatetrækker også tingene op. Skemaer oprettet inden for rammerne af et kantet filsystem forbinder med systemets rodmodul. I dette tilfælde ville det være app.module.tsfilen inde [name-of-app -> src -> app].

ng build

Vinkel er et frontendeværktøj. CLI udfører sine operationer på frontendens vegne. ng servetager sig af opsætningen af ​​back-end-serveren. Dette holder udviklingen helt fokuseret på frontenden. Når det er sagt, skal det også være muligt at forbinde din egen bagende til Angular-applikationen.

ng buildopfylder dette behov. Før du prøver det inde i filsystemet. Naviger til [name-of-app] -> angular.json. Kig efter denne eneste linje kode: "outputPath": "dist/my-app".

Denne ene konfigurationslinje bestemmer, hvor ng buildresultaterne dumpes. Resultaterne er hele Angular-applikationen samlet i en mappe dist/my-app. Inde i den mappe findes der index.html. Hele Angular-applikationen kan køre med index.html. Nej ng serveer nødvendigt herfra. Med denne fil kan du nemt tilslutte din bagende.

Give det en gå: ng build. Igen skal dette udføres inden for Angular-filsystemet. Baseret på nøgleværdien af “outputPath:”in angular.json. En fil genereres, hvor den oprindelige applikation er fuldt kompileret. Hvis du holdt “outputPath:”det samme, vil det samlet ansøgning være i: [name-of-app] -> dist -> [name-of-app].

ng opdatering

I en vinklet cli ng-opdatering foretages automatisk opdatering på alle vinkel- og npm-pakkerne til de nyeste versioner.

Her er syntaksen, og indstillinger kan bruges med ng update.

ng update [package]

Muligheder

  • tørt løb --dry-run (alias: -d)

    Kør igennem uden at foretage ændringer.

  • kraft --force

    Hvis det er falsk, fejler det, hvis installerede pakker er uforenelige med opdateringen.

  • alle --all

    Om alle pakker i package.json skal opdateres.

  • Næste --next

    Brug den største version, inklusive beta og RC'er.

  • kun migrere --migrate-only

    Udfør kun en migrering, opdaterer ikke den installerede version.

  • fra --from

    Version, hvorfra du skal migrere. Kun tilgængelig med en enkelt pakke opdateret og kun ved migration.

  • til --to

    Version, som migrationer skal anvendes til. Kun tilgængelig med en enkelt pakke opdateret og kun ved migreringer. Kræver fra skal specificeres. Standard til den registrerede version fundet.

  • register --registry

    NPM-registreringsdatabasen, der skal bruges.

Disse kommandoer dækker det grundlæggende. Angular's CLI er en utrolig bekvemmelighed, der fremskynder applikationsgenerering, konfiguration og udvidelse. Det gør alt dette, samtidig med at fleksibiliteten opretholdes, så udvikleren kan foretage de nødvendige ændringer.

Tjek disse links på, localhost:4200hvis du ikke allerede har gjort det. Glem ikke at løbe, ng servefør du åbner den. Med en bedre forståelse af CLI er du nu klar til at lære mere om, hvad der genereres af de mest vigtige kommandoer.

Mere information:

  • De bedste vinkeleksempler
  • De bedste vinkel- og vinkelJS-vejledninger
  • Sådan valideres kantede reaktive former