Cum să rulați proiectul Angular [Explicație pas cu pas]

AngularJS este un must-have pentru orice dezvoltator full-stack. Este crucial pentru dezvoltarea front-end, deoarece simplifică utilizarea directivelor HTML. Dezvoltarea unei aplicații web devine mult mai ușoară atunci când utilizați Angular. Deci, în acest articol, vom discuta despre cum puteți începe cu Angular. Vom discuta despre cum să instalați Angular și despre cum să rulați un proiect Angular.

Angular CLI: O scurtă introducere

Dacă doriți să lucrați la proiecte Angular, ar trebui să aveți Angular CLI. Este instrumentul oficial al Angular pentru a lucra la proiecte Angular și pentru a le inițializa. CLI angular reduce multe probleme din procesul de inițializare. Nu trebuie să efectuați mai multe configurații și să construiți instrumente pentru a începe un proiect dacă utilizați Angular CLI.

Angular CLI vă permite să începeți un proiect cu o singură comandă. Cu o altă comandă, puteți servi proiectul folosind un server de dezvoltare local. Angular CLI funcționează pe Node.js. Deci, pentru a rula Angular CLI pe sistemul dvs., ar trebui să aveți mai întâi Node.js în sistem.

Node.js este pentru servere și pentru a dezvolta aplicații pe partea de server, în timp ce Angular este o soluție frontală. Node.js vă ajută numai cu Angular CLI.

Cum se instalează Angular?

Primul pas

Înainte de a instala Angular în sistemul dvs., ar trebui să aveți Node și npm în sistemul dvs. Puteți utiliza Node Version Manager pentru a-l instala sau puteți utiliza managerul oficial de pachete al sistemului de operare. Aveți și opțiunea de a instala Node de pe site-ul său web. Vă recomandăm să îl instalați de pe site, deoarece este rapid și simplu. Trebuie doar să mergeți la pagina de descărcare a node.js .

Al doilea pas

Odată ce vă aflați pe pagina de descărcare a node.js, selectați versiunea de care aveți nevoie în funcție de sistemul dvs. de operare, apoi urmați pașii specificați în expertul de instalare. Dacă ați instalat deja node.js în sistemul dvs., puteți sări peste acest pas (și pe cel anterior).

Al treilea pas:

Pentru a verifica dacă Node este instalat sau nu pe dispozitivul dvs., deschideți promptul de comandă și executați următoarea comandă:

$ nod -v

Ar afișa versiunea instalată în prezent a Node în sistemul dvs.

Al treilea pas

După ce verificați dacă aveți Node instalat în sistemul dvs., puteți instala Angular pe dispozitiv rulând următoarea comandă a promptului de comandă:

$ npm install @angular/cli

După rularea comenzii de mai sus, Angular CLI se va instala pe dispozitivul dvs. Ați finalizat partea „Cum se instalează Angular”.

Aflați: Salariu de dezvoltator angular în India: pentru cei proaspăți și cu experiență

Cum se rulează Angular Project?

Deoarece am instalat Angular în sistemul nostru, acum ne-am concentra pe începerea unui nou proiect.

Primul pas

Am crea un spațiu de lucru și aplicația de pornire rulând următoarea comandă:

ng noi unghiular-tur-de-eroi

Am adăugat angular-tour-of-heroes ca nume pentru spațiul nostru de lucru. Comanda „ng new” vă va cere despre caracteristicile pe care doriți să le adăugați în aplicația de pornire. Deoarece este un tutorial, vom selecta valorile implicite și vom continua apăsând Return sau Enter.

Al doilea pas

Acum, Angular CLI a instalat pachetele și dependențele necesare npm. Veți avea o „aplicație de bun venit” gata de utilizare și un spațiu de lucru nou. De asemenea, veți avea un folder rădăcină cu același nume ca aplicația (angular-tour-of-heroes) și un proiect de aplicație schelet.

În acest pas, trebuie să servim aplicația. Vom face asta mergând la directorul spațiului de lucru și lansând aplicația:

cd angular-tour-of-eroes

ng serve – deschis

Comanda „ng serve” va crea aplicația, va porni serverul de dezvoltare, va avea grijă de fișierele sursă ale proiectului și va reconstrui aplicația pe măsură ce modificați fișierele necesare.

Al treilea pas

Dacă doriți să modificați aplicația, va trebui să vă îndreptați către folderul src/app din IDE-ul sau editorul dvs. Vom edita aplicația noastră schimbând componentele acestui proiect. Componentele sunt elementele de bază ale aplicațiilor Angular. Aceștia se ocupă de aproape toate funcțiile fundamentale ale unui proiect Angular, cum ar fi afișarea datelor, răspunsul la intrare etc.

În acest pas, deschideți IDE-ul și mergeți la directorul proiectului și găsiți fișierele componente ale proiectului:

• app.component.ts
• app.component.html
• app.component.css

Primul fișier este codul clasei și se bazează pe TypeScript, al doilea fișier este șablonul în HTML, iar cel final are stilurile private CSS.

Pasul al patrulea

Proiectul nostru este configurat și avem toate fișierele pregătite. În acest pas, îl vom personaliza prin adăugarea unui titlu. Pentru a schimba titlul proiectului Angular, accesați fișierul app.component.ts și ștergeți șablonul implicit prezent. Angular CLI generează automat un șablon de generare. Îl puteți înlocui cu următoarele:

<h1>{{titlul dvs.}}</h1>

Acoladele sunt sintaxa de interpolare. Puteți înlocui „titlul dumneavoastră” cu titlul dorit. Odată ce ați introdus titlul dorit, reîmprospătați browserul, iar aplicația dvs. va avea noul titlu.

Al cincilea pas

Personalizarea aplicației ar fi incompletă fără nici un stil. Deci, în acest pas, vom modifica stilul aplicației noastre Angular. Angular CLI generează un styles.css gol pentru aplicația dvs. atunci când creați un nou proiect. Puteți introduce stilurile dorite aici.

Deschideți fișierul src/styles.css din IDE și începeți să modificați stilul aplicației. Modificați stilurile aplicației și salvați modificările. Când reîmprospătați browserul, veți vedea modificările în aplicația dvs.

Checkout: Cum se implementează paginarea în Angular JS?

Aflați mai multe despre dezvoltarea unghiulară și full-stack

Acum știi cum să instalezi Angular în sistemul tău și cum să rulezi un proiect Angular. Odată ce ați înțeles, veți vedea că lucrul cu Angular este mult mai ușor decât credeați. Cu puțină experiență, puteți începe să lucrați la proiecte de dezvoltare web front-end cu Angular.

Dacă sunteți interesat să aflați mai multe despre dezvoltarea web Angular și front-end, atunci iată câteva resurse suplimentare:

• Ghid de CV pentru dezvoltatori front-end
• Top 10 abilități pentru a deveni un dezvoltator front-end
• Idei de proiecte front-end

Pe de altă parte, puteți urma un curs de dezvoltare complet și puteți învăța de la experții din industrie prin videoclipuri, proiecte și chestionare.

Dacă sunteți interesat să aflați mai multe despre dezvoltarea de software full-stack, consultați UpGrad & IIIT-B PG Diploma in Full-stack Software Development, care este concepută pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte și misiuni. , Statut de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.