Introducere CLI unghiulară

În această postare, vom afla despre CLI Angular și vom vedea cum să-l utilizăm pentru inițializarea unui nou proiect Angular.

Ce este CLI unghiular?

Angular CLI este instrumentul oficial pentru inițializarea și colaborarea cu proiecte Angular. Vă salvează de dificultățile configurațiilor complexe și de a construi instrumente precum TypeScript, Webpack ș.a.

După instalarea Angular CLI, va trebui să rulați o comandă pentru a genera un proiect și o alta pentru a-l servi folosind un server de dezvoltare locală pentru a juca cu aplicația dvs.

La fel ca majoritatea instrumentelor moderne de frontend în aceste zile, Angular CLI este construit pe Node.js.

Node.js este o tehnologie server care vă permite să rulați JavaScript pe server și să construiți aplicații web din partea serverului. Cu toate acestea, Angular este o tehnologie front-end, așa că, chiar dacă trebuie să instalați Node.js pe mașina dvs. de dezvoltare, este doar pentru a rula CLI.

După ce construiți aplicația pentru producție, nu veți avea nevoie de Node.js, deoarece pachetele finale sunt doar HTML, CSS și JavaScript statice, care pot fi furnizate de orice server sau CDN.

Acestea fiind spuse, dacă construiți o aplicație web completă cu Angular, este posibil să aveți nevoie de Node.js pentru crearea părții din spate, dacă doriți să utilizați JavaScript pentru partea frontală și cea din spate.

Consultați stiva MEAN - este o arhitectură care include MongoDB, Express (un server web și un cadru API REST construit pe Node.js) și Angular. Puteți citi acest articol dacă doriți să începeți un tutorial pas cu pas.

În acest caz, Node.js este utilizat pentru a construi partea din spate a aplicației dvs. și poate fi înlocuit cu orice tehnologie din partea serverului pe care o doriți, cum ar fi PHP, Ruby sau Python. Dar Angular nu depinde de Node.js, cu excepția instrumentului său CLI și pentru instalarea pachetelor de la npm.

NPM înseamnă Node Package Manager. Este un registru pentru găzduirea pachetelor cu noduri. În ultimii ani a fost folosit și pentru publicarea pachetelor front-end și a bibliotecilor precum Angular, React, Vue.js și chiar Bootstrap.

Notă: puteți descărca gratuit Angular Book: Creați primele dvs. aplicații web cu Angular gratuit.

Instalarea unghiului CLI

În primul rând, trebuie să aveți Node și npm instalate pe mașina dvs. de dezvoltare. Există mai multe modalități de a face asta, cum ar fi:

  • folosind NVM (Node Version Manager) pentru instalarea și lucrul cu mai multe versiuni de nod în sistemul dvs.
  • folosind managerul oficial de pachete al sistemului dvs. de operare
  • instalarea acesteia de pe site-ul oficial.

Să-l păstrăm simplu și să utilizăm site-ul oficial. Pur și simplu accesați pagina de descărcare și apucați binarele pentru Windows, apoi urmați asistentul de configurare.

Vă puteți asigura că Node este instalat pe sistemul dvs. rulând următoarea comandă într-un prompt de comandă care ar trebui să afișeze versiunea instalată a Nodului:

$ nod -v

Apoi, executați următoarea comandă pentru instalarea unghiului CLI:

$ npm instala @ angular / cli

În momentul scrierii, va fi instalat Angular 8.3.

Dacă doriți să instalați Angular 9, pur și simplu adăugați următoarea etichetă după cum urmează:

$ npm instalați @ angular / cli @ următorul

După ce comanda se termină cu succes, ar trebui să aveți instalat unghiul CLI.

Un ghid rapid pentru CLI unghiular

După instalarea unghiului CLI, puteți rula multe comenzi. Să începem verificând versiunea CLI instalată:

$ ng versiune

O a doua comandă pe care ar putea fi necesar să o executați este comanda de ajutor pentru a obține un ajutor complet de utilizare:

$ ng ajutor

CLI oferă următoarele comenzi:

add: Adăugă suport pentru o bibliotecă externă proiectului tău.

build (b): Compilează o aplicație unghiulară într-un director de ieșire numit dist / la calea de ieșire dată. Trebuie executat dintr-un director al spațiului de lucru.

config: preia sau setează valori de configurare unghiulară.

doc (d): Deschide documentația unghiulară oficială (angular.io) într-un browser și caută un cuvânt cheie dat.

e2e (e): Creează și servește o aplicație unghiulară, apoi execută teste end-to-end folosind Protractor.

generate (g): generează și / sau modifică fișierele bazate pe o schematică.

ajutor: Listează comenzile disponibile și descrierile scurte ale acestora.

lint (l): rulează instrumentele de liniere pe codul aplicației unghiulare într-un folder de proiect dat.

new (n): creează un spațiu de lucru nou și o aplicație unghiulară inițială.

rulează: rulează o țintă personalizată definită în proiectul tău.

serve (e): Creează și servește aplicația dvs., reconstruind pe modificări de fișiere.

test (t): execută testele unității într-un proiect.

actualizare: actualizează aplicația și dependențele acesteia. Vezi https://update.angular.io/

versiunea (v): Ieșiri versiune CLI unghiulară.

xi18n: extrage mesaje i18n din codul sursă.

Generarea unui proiect

Puteți utiliza Angular CLI pentru a genera rapid proiectul dvs. Angular rulând următoarea comandă în interfața liniei de comandă:

$ ng frontend nou

Notă: frontend este numele proiectului. Puteți alege, desigur, orice nume valid pentru proiectul dvs. Întrucât vom crea o aplicație full-stack, folosesc frontend ca nume pentru aplicația front-end.

Așa cum am menționat anterior, CLI vă va solicita Doriți să adăugați rutare unghiulară? și puteți răspunde introducând y (Da) sau n (Nu), care este opțiunea implicită. De asemenea, vă va întreba despre formatul foii de stil pe care doriți să îl utilizați (cum ar fi CSS). Alegeți opțiunile și apăsați Enter pentru a continua.

După aceea, proiectul dvs. va fi creat cu o structură de directoare și o mulțime de configurații și fișiere de cod. Acesta va fi preponderent în format TypeScript și JSON. Să vedem rolul fiecărui fișier:

  • / e2e /: conține teste end-to-end (care simulează comportamentul utilizatorului) ale site-ului web
  • / node_modules /: Toate bibliotecile terță parte sunt instalate în acest folder folosind npm install
  • / src /: conține codul sursă al aplicației. Majoritatea lucrărilor vor fi făcute aici
  • / app /: conține module și componente
  • / active /: conține active statice precum imagini, pictograme și stiluri
  • / environment /: conține fișiere de configurare specifice mediului (producție și dezvoltare)
  • Lista de browsere: necesară de autoprefixer pentru suport CSS
  • favicon.ico: favicon
  • index.html: fișierul HTML principal
  • karma.conf.js: fișierul de configurare pentru Karma (un instrument de testare)
  • main.ts: fișierul principal de pornire de unde este declanșat AppModule
  • polyfills.ts: polifoane necesare de Angular
  • styles.css: fișierul de stiluri globale pentru proiect
  • test.ts: acesta este un fișier de configurare pentru Karma
  • tsconfig. *. json: fișierele de configurare pentru TypeScript
  • angular.json: conține configurațiile pentru CLI
  • package.json: conține informațiile de bază ale proiectului (nume, descriere și dependențe)
  • README.md: un fișier de marcaj care conține o descriere a proiectului
  • tsconfig.json: fișierul de configurare pentru TypeScript
  • tslint.json: fișierul de configurare pentru TSlint (un instrument de analiză statică)

Deservirea proiectului

Angular CLI oferă un lanț complet de instrumente pentru dezvoltarea aplicațiilor front-end pe mașina dvs. locală. Ca atare, nu este necesar să instalați un server local pentru a servi proiectul dvs. - puteți folosi pur și simplu comanda ng serve de la terminalul dvs. pentru a vă servi proiectul local.

Mai întâi, navigați în folderul proiectului și executați următoarele comenzi:

$ cd frontend $ ng servire

Acum puteți naviga către adresa http: // localhost: 4200 / pentru a începe să vă jucați cu aplicația front end. Pagina va fi reîncărcată în mod automat dacă modificați orice fișier sursă.

Generarea de artefacte unghiulare

Angular CLI oferă o comandă de generare ng, care ajută dezvoltatorii să genereze artefacte unghiulare de bază, cum ar fi module, componente, directive, conducte și servicii:

$ ng generează componenta mea-componentă

componenta mea este numele componentei. CLI Angular va adăuga automat o referință la componente, directive și conducte din fișierul src / app.module.ts.

Dacă doriți să adăugați componenta, directiva sau conducta la un alt modul (altul decât modulul principal de aplicație, app.module.ts), puteți pur și simplu să prefixați numele componentei cu numele modulului și o lamă:

$ ng g componenta my-module / my-component

my-module este numele unui modul existent.

Concluzie

În această postare, am văzut cum se instalează Angular CLI pe mașina noastră de dezvoltare și am folosit-o pentru a iniția de la zero un nou proiect Angular.

Am văzut, de asemenea, diverse comenzi pe care le puteți utiliza pe parcursul dezvoltării proiectului dvs. pentru a genera artefacte unghiulare, cum ar fi module, componente și servicii.

Puteți accesa sau urmări autorul prin intermediul site-ului său personal, Twitter, LinkedIn și Github.