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 -g
flag.
Kontroller CLI er der med kommandoen: ng -v
. Dette udsender flere informationslinjer. En af disse linjer angiver versionen af den installerede CLI.
Genkend det ng
er 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 new
opretter 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 serve
kommandoen 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:4200
i 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 .component
filer definerer en Angular komponent herunder dens logik ( .ts
), typografi ( .css
), layout ( .html
), og prøvning ( .spec.ts
). Det app.module.ts
særligt skiller sig ud. Sammen arbejder disse to grupper af filer sammen som component
og module
. Både component
og module
er 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 module
eksporterer og importerer aktiver til og fra et underliggende komponenttræ. A component
vedrører sig selv med et afsnit af brugergrænsefladen. Enhedens logik, stil, layout og test forbliver indkapslet i de forskellige .component
filer.
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 component
ved 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 component
filer.
Du kan se, at ng generate
fremskynder Angular's kedelpladekode. ng generate
træ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.ts
filen inde [name-of-app -> src -> app]
.
ng build
Vinkel er et frontendeværktøj. CLI udfører sine operationer på frontendens vegne. ng serve
tager 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 build
opfylder 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 build
resultaterne 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 serve
er 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:4200
hvis du ikke allerede har gjort det. Glem ikke at løbe, ng serve
fø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