Angular este strâns asociat cu interfața sa de linie de comandă (CLI). CLI eficientizează generarea sistemului de fișiere Angular. Se ocupă de cea mai mare parte a configurației din culise, astfel încât dezvoltatorii să poată începe codarea. CLI are, de asemenea, o curbă de învățare scăzută, recomandabilă oricărui nou-venit care dorește să intre direct. Heck, chiar și dezvoltatorii angulari cu experiență se bazează pe CLI!

Instalare

CLI angular necesită Node.js și Node Packet Manager (NPM). Puteți verifica aceste programe cu comanda terminal: node -v; npm -v. Odată instalat, deschideți un terminal și instalați Angular CLI cu această comandă: npm install -g @angular/cli. Acest lucru poate fi executat de oriunde din sistemul dvs. CLI este configurat pentru utilizare globală cu -g steag.

Verificați dacă CLI este acolo cu comanda: ng -v. Aceasta produce mai multe linii de informații. Una dintre aceste linii indică versiunea CLI instalată.

Recunoașteți asta ng este elementul de bază al CLI. Toate comenzile tale vor începe cu ng. Este timpul să aruncați o privire la cele mai comune comenzi prefixate cu ng.

Comenzi cheie

  • nou
  • servește
  • generează
  • construi
  • actualizare

Termenii cheie pentru fiecare dintre aceștia sunt destul de grăitoare. Împreună, acestea cuprind ceea ce veți avea nevoie pentru a lovi terenul cu Angular. Desigur, mai sunt multe. Toate comenzile sunt prezentate în Documentația GitHub a CLI1. Veți găsi probabil că comenzile enumerate mai sus vor acoperi bazele necesare.

nou

ng new creează o nou Sistem de fișiere unghiular. Acesta este un proces suprarealist. Navigați la locația de fișier dorită pentru nou generarea de aplicații. Tastați această comandă după cum urmează, înlocuind [name-of-app] cu orice vrei: ng new [name-of-app].

Un sistem de fișiere sub dosar [name-of-app] ar trebui să apară. Simțiți-vă liber să explorați ce se află în interior. Încearcă să nu faci încă nicio modificare. Tot ce aveți nevoie pentru a rula prima aplicație Angular este împachetat împreună în acest sistem de fișiere generat.

servește

Pentru a rula aplicația, fișierul ng serve comanda trebuie să se execute în cadrul [name-of-app] pliant. Oricare din dosar va face acest lucru. CLI angular trebuie să recunoască faptul că se află într-un mediu generat cu ng new. Va rula cu condiția ca această condiție. Continuați și încercați: ng serve.

Aplicația rulează implicit pe portul 4200. Puteți vizualiza aplicația Angular navigând la localhost:4200 în orice browser web. Unghiular funcționează pe toate browserele. Cu excepția cazului în care utilizați o versiune veche a Internet Explorer, aplicația va apărea. Afișează logo-ul oficial Angular alături de o listă de linkuri utile.

Ok, aplicația rulează. Sperăm că funcționează, dar trebuie să știți ce se întâmplă sub capotă. Consultați înapoi la [name-of-app] Sistemul de fișiere. Navigați [name-of-app] -> src -> app. Aici se află fișierele responsabile pentru ceea ce ați văzut localhost:4200.

generează

.component fișierele definesc o componentă unghiulară, inclusiv logica sa (.ts), stil (.css), aspect (.html) și testare (.spec.ts). app.module.ts se remarcă în special. Împreună, aceste două grupuri de fișiere funcționează împreună ca component și module. Ambii component și module sunt două exemple separate de schemă unghiulară. Schemele clasifică diferitele blocuri de cod bazate pe scopuri generabil cu ng generate.

De dragul acestui articol, înțelegeți că a module exportă și importă active către și dintr-un arbore component subiacent. A component se preocupă de o secțiune a interfeței cu utilizatorul. Logica, stilul, aspectul și testarea acelei unități rămân încapsulate în diverse .component fișiere.

Cât despre ng generate, această comandă poate genera schelete pentru fiecare dintre cele disponibile Scheme unghiulare2. Navigheaza catre [name-of-app -> src -> app]. Încercați să generați un nou component prin executarea: ng generate component [name-of-component]. A inlocui [name-of-component] cu orice ai vrea. Un fișier nou [name-of-component] va apărea împreună cu necesarul său component fișiere.

Puteți vedea asta ng generateîi accelerează pe Angular codul cazanului. ng generate de asemenea, conectează lucrurile. Schemele create în contextul unui sistem de fișiere angular se conectează cu modulul rădăcină al sistemului. În acest caz, asta ar fi app.module.ts fișier în interior [name-of-app -> src -> app].

construi

Unghiular este un instrument frontal. CLI își efectuează operațiunile în numele front-end-ului. ng serve se ocupă de configurarea serverului back-end. Acest lucru menține dezvoltarea concentrată în întregime pe partea frontală. Acestea fiind spuse, conectarea propriului dvs. back-end la aplicația Angular trebuie să fie posibilă.

ng build îndeplinește această nevoie. Înainte de a-l încerca în interiorul sistemului de fișiere. Navigheaza catre [name-of-app] -> angular.json. Căutați această singură linie de cod: "outputPath": "dist/my-app".

Această linie de configurație determină unde ng build își aruncă rezultatele. Rezultatele sunt întreaga aplicație Angular compilată într-un singur folder dist/my-app. În interiorul acelui folder există index.html. Întreaga aplicație Angular poate rula cu index.html. Nu ng serve este necesar de aici. Cu acest fișier, vă puteți conecta cu ușurință capătul din spate.

Încearcă: ng build. Din nou, acest lucru trebuie să se execute în sistemul de fișiere Angular. Pe baza valorii cheie a “outputPath:” în angular.json. Se va genera un fișier în care aplicația originală este complet compilată. Dacă ai păstra “outputPath:” la fel, aplicația compilată va fi în: [name-of-app] -> dist -> [name-of-app].

actualizare

În actualizarea unghiulară, efectuați actualizarea automată a tuturor pachetelor unghiulare și npm la cele mai recente versiuni.

Iată sintaxa și opțiunile pot fi folosite cu ng update.

ng update [package]

Opțiuni

  • alergare uscată --dry-run (alias: -d)
    Rulați fără a face modificări.
  • forta --force
    Dacă este fals, se va erora dacă pachetele instalate sunt incompatibile cu actualizarea.
  • toate --all
    Dacă se actualizează toate pachetele din package.json.
  • Următorul --next
    Folosiți cea mai mare versiune, inclusiv beta și RC.
  • numai pentru migrare --migrate-only
    Efectuați doar o migrare, nu actualizați versiunea instalată.
  • din --from
    Versiune din care să migrez. Disponibil numai cu un singur pachet în curs de actualizare și numai pentru migrare.
  • la --to
    Versiune până la care să se aplice migrațiile. Disponibil numai cu un singur pachet în curs de actualizare și numai pentru migrări. Necesită de la să fie specificat. S-a detectat implicit versiunea instalată.
  • registru --registry
    Registrul NPM de utilizat.

Aceste comenzi acoperă elementele de bază. CLI Angular este o comoditate incredibilă care accelerează generarea, configurarea și extinderea aplicațiilor. Face toate acestea, menținând în același timp flexibilitatea, permițând dezvoltatorului să facă modificările necesare.

Vă rugăm să verificați aceste linkuri de pe localhost:4200 dacă nu ai făcut-o deja. Nu uitați să fugiți ng serve înainte de a-l deschide. Cu o mai bună înțelegere a CLI, sunteți acum gata să aflați mai multe despre ceea ce este generat de cele mai esențiale comenzi ale acestuia.

Mai multe informatii:

  • Cele mai bune exemple unghiulare
  • Cele mai bune tutoriale Angular și AngularJS
  • Cum se validează formele reactive unghiulare