Cum se instaleaza Angular pe Windows un ghid pentru CLI

În acest tutorial, vom învăța cum să instalați Angular CLI în Windows și să îl folosim pentru a crea un proiect Angular.

Ce este CLI angular?

Angular CLI este instrumentul oficial pentru inițializarea și lucrul cu proiectele Angular. Vă scutește de dificultățile configurațiilor complexe și construiește instrumente precum TypeScript, Webpack și așa mai departe.

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

La fel ca majoritatea instrumentelor frontend moderne, CLI angular este construit deasupra Node.js.

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

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

Acestea fiind spuse, dacă construiți un stack complet aplicație web cu Angular, este posibil să aveți nevoie de Node.js pentru crearea părții de back-end dacă doriți să utilizați JavaScript pentru front-end și back-end.

Verificați stiva MEAN – este o arhitectură care include MongoDB, Express (un server web și un framework REST API construit deasupra Node.js) și Angular. Puteți citi acest lucru 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 și poate fi înlocuit cu orice tehnologie de server dorită, cum ar fi PHP, Ruby sau Python. Dar Angular nu depinde de Node.js, cu excepția instrumentului CLI și a instalării pachetelor de la npm.

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

Notă: puteți descărca Angular 8 Book: Construiți-vă primele aplicații web cu Angular 8 gratuit.

Instalarea Angular CLI pe Windows

Mai întâi, trebuie să aveți Node și npm instalate pe mașina de dezvoltare. Există multe modalități de a face acest lucru, cum ar fi:

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

Să o simplificăm și să folosim site-ul oficial. Pur și simplu vizitați pagina de descărcare și apucați binarele pentru Windows, apoi urmați expertul de configurare.

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

$ node -v

Apoi, executați următoarea comandă pentru a instala Angular CLI:

$ npm install @angular/cli

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

Un ghid rapid pentru CLI angular

După instalarea Angular CLI, puteți rula multe comenzi. Să începem prin a verifica versiunea CLI instalată:

$ ng version

O a doua comandă pe care este posibil să trebuiască să o executați este help comandă pentru obținerea unui ajutor complet de utilizare:

$ ng help

CLI oferă următoarele comenzi:

add: Adaugă suport pentru o bibliotecă externă proiectului dumneavoastră.

build (b): Compilează o aplicație angulară î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: Preluează sau setează valori de configurație unghiulară.

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

e2e (e): Construiește și servește o aplicație angulară, apoi rulează teste end-to-end folosind Protractor.

generate (g): Generează și / sau modifică fișiere pe baza unei scheme.

help: Listează comenzile disponibile și descrierile lor scurte.

lint (l): Rulează instrumente de linting pe codul aplicației angulare într-un folder de proiect dat.

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

run: Rulează o țintă personalizată definită în proiectul dvs.

serve (s): Construiește și servește aplicația dvs., reconstruind la modificările de fișiere.

test

update: Actualizează aplicația și dependențele acesteia. Vedea https://update.angular.io/

version (v): Iește versiunea CLI unghiulară.

xi18n: Extrage mesaje i18n din codul sursă.

Generarea unui proiect

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

$ ng new frontend

Notă: în față este numele proiectului. Desigur, puteți alege orice nume valid pentru proiectul dvs. Din moment ce vom crea o aplicație full-stack pe care o folosesc în față ca nume pentru aplicația front-end.

Așa cum am menționat anterior, CLI vă va întreba Doriți să adăugați rutare angulară?, și puteți răspunde intrâ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 a continua.

Structura proiectului unghiular 8

După aceea, veți avea proiectul creat cu o structură de directoare și o grămadă de configurații și fișiere de cod. Va fi în mare parte în formatele TypeScript și JSON. Să vedem rolul fiecărui fișier:

  • /e2e/: conține teste end-to-end (simulând 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. Cele mai multe lucrări se vor face aici
  • /app/: conține module și componente
  • /assets/: conține materiale statice precum imagini, pictograme și stiluri
  • /environments/: conține fișiere de configurare specifice mediului (producție și dezvoltare)
  • browserslist: nevoie de autoprefixer pentru suport CSS
  • favicon.ico: faviconul
  • 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 AppModule este bootstrapped
  • polyfills.ts: polifenituri necesare Angular
  • styles.css: fișierul global de foaie de stil 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 reducere 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ă)

Servirea Proiectului dvs.

CLI angular oferă un lanț complet de instrumente pentru dezvoltarea aplicațiilor front-end pe computerul dvs. local. Ca atare, nu este nevoie să instalați un server local pentru a vă servi proiectul - puteți utiliza pur și simplu ng serve comandă de la terminalul dvs. pentru a vă servi proiectul local.

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

$ cd frontend
$ ng serve

Acum puteți naviga la http: // localhost: 4200 / adresa pentru a începe să se joace cu aplicația dvs. front-end. Pagina se va reîncărca automat dacă modificați orice fișier sursă.

Generarea artefactelor unghiulare

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

$ ng generate component my-component

my-component este numele componentei. CLI angular va adăuga automat o referință la components, directives și pipes în src/app.module.ts fişier.

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

$ ng g component my-module/my-component

my-module este numele unui modul existent.

Concluzie

În acest tutorial, am văzut cum să instalăm Angular CLI pe computerul nostru Windows și l-am folosit pentru a inițializa un nou proiect Angular de la zero.

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

Verificați celălalt Tutoriale unghiulare.

Puteți contacta sau urmări autorul prin intermediul acestuia Site personal, Stare de nervozitate, LinkedIn și Github.