Creare ed eseguire un progetto Angular

Cos'è Angular?

Angular è un framework front-end open source mantenuto da Google per la costruzione di applicazioni a pagina singola (SPA) dinamiche. Basato su TypeScript, offre molti strumenti e funzionalità che consentono agli sviluppatori di costruire applicazioni complesse in modo efficiente. Il concetto di base di Angular è la modularità e i componenti, il che rende il codice più facile da organizzare e mantenere.

Caratteristiche principali e vantaggi di Angular

• Componentizzazione: Consente di costruire l'interfaccia utente attraverso i componenti, rendendo il codice più modulare e riutilizzabile.
• Binding bidirezionale: Sincronizza automaticamente il modello di dati e la vista, rendendo la gestione dei dati più comoda.
• Iniezione di dipendenze: Migliora la testabilità e la manutenibilità del codice attraverso il meccanismo di iniezione delle dipendenze.
• Strumento CLI potente: Angular offre uno strumento da riga di comando potente (Angular CLI) che semplifica la creazione, lo sviluppo e la costruzione del progetto.
• Routing e gestione dei moduli incorporati: Angular offre potenti funzionalità di routing e gestione dei moduli, facilitando la costruzione di applicazioni a pagina singola.

Usare Angular può aiutare gli sviluppatori a costruire applicazioni web moderne e reattive in modo più efficiente.

Creare ed eseguire un progetto Angular usando ServBay

In questo articolo, utilizzeremo l'ambiente Node.js fornito da ServBay per creare ed eseguire un progetto Angular. Utilizzeremo la funzione 'Host' di ServBay per configurare il server Web e rendere accessibile il progetto tramite proxy inverso e servizio di file statici.

Creare un progetto Angular

1. Inizializzare il progetto

   Prima di tutto, assicurati di avere installato l'ambiente Node.js fornito da ServBay. Poi, installa globalmente Angular CLI con il seguente comando:

   npm install -g @angular/cli

   Crea un nuovo progetto Angular nella directory principale del sito web consigliata da ServBay /Applications/ServBay/www:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Segui le istruzioni inserendo il nome del progetto (consigliato servbay-angular-app) e scegliendo le altre opzioni secondo necessità:

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Installare le dipendenze

   Entra nella directory del progetto e installa le dipendenze:

   cd servbay-angular-app
   npm install

Modificare il contenuto del progetto Angular

1. Modificare il file src/app/app.component.html

   Apri il file src/app/app.component.html e modifica il contenuto per far sì che la pagina web mostri "Hello ServBay!":

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Entrare in modalità di sviluppo

1. Eseguire il server di sviluppo

   Avvia il server di sviluppo specificando la porta (ad esempio: 8585):

   ng serve --port 8585

   Questo avvierà un server di sviluppo locale ed esporrà la porta 8585.

2. Configurare il proxy inverso dell'host di ServBay

   Utilizza la funzione 'Host' di ServBay per accedere al server di sviluppo tramite proxy inverso. Nella configurazione dell'host di ServBay, aggiungi un nuovo proxy inverso:

   • Nome: My first Angular dev site
   • Dominio: servbay-angular-test.dev
   • Tipo di host: Proxy inverso
   • IP: 127.0.0.1
   • Porta: 8585

   Per ulteriori dettagli sulle impostazioni, consulta aggiungere un sito di sviluppo Nodejs.

3. Accedere alla modalità di sviluppo

   Apri il browser e vai su https://servbay-angular-test.dev per vedere il progetto in tempo reale. Poiché ServBay supporta domini personalizzati e certificati SSL gratuiti, godrai di una maggiore sicurezza.

Costruire la versione di produzione

1. Compilare la versione di produzione

   Una volta completato lo sviluppo, utilizza il seguente comando per compilare la versione di produzione:

   ng build --prod

   Al termine della compilazione, i file statici generati si troveranno nella directory dist/servbay-angular-app.

2. Configurare il servizio di file statici

   Usa la funzione 'Host' di ServBay per accedere alla versione di produzione tramite servizio di file statici. Nella configurazione dell'host di ServBay, aggiungi un nuovo sito statico:

   • Nome: My first Angular production site
   • Dominio: servbay-angular-test.prod
   • Tipo di host: Statico
   • Directory principale del sito web: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Accedere alla modalità di produzione

   Apri il browser e vai su https://servbay-angular-test.prod per vedere la versione di produzione. Con i domini personalizzati e i certificati SSL gratuiti di ServBay, il tuo sito web sarà più sicuro e affidabile.

Seguendo questi passaggi, avrai creato e eseguito con successo un progetto Angular utilizzando le funzionalità offerte da ServBay per gestire e accedere al tuo progetto.