Come eseguire il progetto angolare [Spiegazione passo passo]

AngularJS è un must per qualsiasi sviluppatore full-stack. È fondamentale per lo sviluppo front-end in quanto semplifica l'uso delle direttive HTML. Lo sviluppo di un'app Web diventa molto più semplice quando usi Angular. Quindi, in questo articolo, discuteremo di come iniziare con Angular. Discuteremo come installare Angular e come eseguire un progetto Angular.

CLI angolare: una breve introduzione

Se vuoi lavorare su progetti Angular, dovresti avere Angular CLI. È lo strumento ufficiale di Angular per lavorare su progetti Angular e inizializzarli. Angular CLI riduce molti problemi dal processo di inizializzazione. Non è necessario eseguire più configurazioni e creare strumenti per avviare un progetto se si utilizza Angular CLI.

Angular CLI consente di avviare un progetto con un solo comando. Con un altro comando, puoi servire il progetto utilizzando un server di sviluppo locale. Angular CLI funziona su Node.js. Quindi, per eseguire Angular CLI sul tuo sistema, dovresti prima avere Node.js nel tuo sistema.

Node.js è per server e per sviluppare applicazioni lato server, mentre Angular è una soluzione front-end. Node.js ti aiuta solo con Angular CLI.

Come installare Angular?

Primo passo

Prima di installare Angular nel tuo sistema, dovresti avere Node e npm nel tuo sistema. Puoi utilizzare Node Version Manager per installarlo oppure puoi utilizzare il gestore di pacchetti ufficiale del tuo sistema operativo. Hai anche la possibilità di installare Node dal suo sito web. Ti consigliamo di installarlo dal sito Web in quanto è semplice e veloce. Dovresti solo andare alla pagina di download di node.js .

Secondo passo

Una volta che sei nella pagina di download di node.js, seleziona la versione che ti serve in base al tuo sistema operativo, quindi segui i passaggi specificati nella procedura guidata di installazione. Se hai già installato node.js nel tuo sistema in precedenza, puoi saltare questo passaggio (e il precedente).

Terzo passo:

Per verificare se Node è installato nel dispositivo o meno, apri il prompt dei comandi ed esegui il comando seguente:

$ nodo -v

Mostrerebbe la versione attualmente installata di Node nel tuo sistema.

Terzo passo

Dopo aver verificato se hai installato Node nel tuo sistema, puoi installare Angular nel tuo dispositivo eseguendo il seguente comando del prompt dei comandi:

$ npm install @angular/cli

Dopo aver eseguito il comando sopra, Angular CLI verrà installato nel tuo dispositivo. Hai completato la parte "come installare Angular".

Impara: stipendio angolare dello sviluppatore in India: per matricole ed esperti

Come eseguire il progetto angolare?

Poiché abbiamo installato Angular nel nostro sistema, ora ci concentreremo sull'avvio di un nuovo progetto.

Primo passo

Creeremmo un'area di lavoro e l'app di avviamento eseguendo il comando seguente:

ng nuovo giro-di-eroi angolare

Abbiamo aggiunto angular-tour-of-heroes come nome per il nostro spazio di lavoro. Il comando 'ng new' ti chiederà le funzionalità che desideri aggiungere nell'app di avvio. Poiché si tratta di un tutorial, selezioneremo le impostazioni predefinite e procederemo premendo Invio o Invio.

Secondo passo

Ora, Angular CLI ha installato i pacchetti e le dipendenze npm richiesti. Avresti un'app di benvenuto pronta per l'uso e un nuovo spazio di lavoro. Avresti anche una cartella principale con lo stesso nome dell'app (angular-tour-of-heroes) e un progetto di app scheletro.

In questo passaggio, dobbiamo servire l'applicazione. Lo faremo andando alla directory dell'area di lavoro e avviando l'app:

cd angular-tour-of-heroes

ng serve –aperto

Il comando 'ng serve' creerà l'app, avvierà il server di sviluppo, si occuperà dei file di origine del tuo progetto e ricostruirà l'app mentre modifichi i file necessari.

Terzo passo

Se vuoi modificare l'app, dovrai andare alla cartella src/app nel tuo IDE o editor. Modificheremo la nostra app cambiando i componenti di questo progetto. I componenti sono gli elementi costitutivi delle app Angular. Gestiscono quasi tutte le funzioni fondamentali di un progetto Angular, come mostrare i dati, rispondere agli input, ecc.

In questo passaggio, apri il tuo IDE e vai alla directory del progetto e trova i file componenti del tuo progetto:

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

Il primo file è il codice della classe ed è basato su TypeScript, il secondo file è il modello in HTML e l'ultimo ha gli stili CSS privati.

Quarto passo

Il nostro progetto è pronto e abbiamo tutti i file pronti. In questo passaggio, lo personalizzeremo aggiungendo un titolo. Per modificare il titolo del tuo progetto Angular, vai al file app.component.ts ed elimina il modello predefinito presente. Angular CLI genera automaticamente un modello di generazione. Puoi sostituirlo con il seguente:

<h1>{{il tuo titolo}}</h1>

Le parentesi graffe sono la sintassi di associazione di interpolazione. Puoi sostituire "il tuo titolo" con il titolo desiderato. Dopo aver inserito il titolo desiderato, aggiorna il browser e la tua applicazione avrà il nuovo titolo.

Quinto passo

La personalizzazione dell'app sarebbe incompleta senza alcuno stile. Quindi, in questo passaggio, modificheremo lo stile della nostra app Angular. Angular CLI genera un file styles.css vuoto per la tua applicazione quando crei un nuovo progetto. Puoi inserire gli stili desiderati qui.

Apri il file src/styles.css nel tuo IDE e inizia a modificare lo stile dell'applicazione. Modifica gli stili dell'app e salva le modifiche. Quando aggiorni il browser, vedrai le modifiche nella tua app.

Checkout: come implementare l'impaginazione in Angular JS?

Ulteriori informazioni sullo sviluppo angolare e full-stack

Ora sai come installare Angular nel tuo sistema e come eseguire un progetto Angular. Una volta capito, vedrai che lavorare con Angular è molto più semplice di quanto pensassi. Con un po' di esperienza, puoi iniziare a lavorare su progetti di sviluppo web front-end con Angular.

Se sei interessato a saperne di più sullo sviluppo web di Angular e front-end, ecco alcune risorse aggiuntive:

• Guida al curriculum per sviluppatori front-end
• Le 10 migliori abilità per diventare uno sviluppatore front-end
• Idee per progetti front-end

D'altra parte, puoi seguire un corso di sviluppo completo e imparare da esperti del settore attraverso video, progetti e quiz.

Se sei interessato a saperne di più sullo sviluppo di software full-stack, dai un'occhiata al Diploma PG di upGrad e IIIT-B in Sviluppo software full-stack, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi , status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.