Angular 2 Installare angular2 con angular-cli


Esempio

Questo esempio è una rapida configurazione di Angular 2 e come generare un progetto di esempio rapido.

Prerequisiti:

Apri un terminale ed esegui i comandi uno a uno:

npm install -g @angular/cli

o

yarn global add @angular/cli

a seconda della scelta del gestore pacchetti.

Il comando precedente installa @ angular / cli a livello globale, aggiungendo l'eseguibile ng a PATH.

Per impostare un nuovo progetto

Navigare con il terminale in una cartella in cui si desidera impostare il nuovo progetto.

Esegui i comandi:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Cioè, ora hai un semplice progetto di esempio realizzato con Angular 2. Ora puoi navigare al link visualizzato nel terminale e vedere cosa sta facendo.

Per aggiungere a un progetto esistente

Passa alla radice del tuo progetto attuale.

Esegui il comando:

ng init

Questo aggiungerà l'impalcatura necessaria al tuo progetto. I file verranno creati nella directory corrente, quindi assicurati di eseguirlo in una directory vuota.

Esecuzione del progetto a livello locale

Per vedere e interagire con la tua applicazione mentre è in esecuzione nel browser, devi avviare un server di sviluppo locale che ospita i file per il tuo progetto.

ng serve

Se il server è stato avviato correttamente, dovrebbe visualizzare un indirizzo al quale è in esecuzione il server. Di solito è questo:

http://localhost:4200

Subito dopo questo server di sviluppo locale è collegato a Hot Module Reloading, quindi qualsiasi modifica a html, typescript o css attiverà il browser per essere ricaricato automaticamente (ma può essere disabilitato se lo si desidera).

Generazione di componenti, direttive, condotte e servizi

Il comando ng generate <scaffold-type> <name> (o semplicemente ng g <scaffold-type> <name> ) consente di generare automaticamente componenti angolari:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Esistono diversi tipi di scaffold che angular-cli può generare:

Tipo di impalcatura uso
Modulo ng g module my-new-module
Componente ng g component my-new-component
Direttiva ng g directive my-new-directive
Tubo ng g pipe my-new-pipe
Servizio ng g service my-new-service
Classe ng g class my-new-class
Interfaccia ng g interface my-new-interface
enum ng g enum my-new-enum

Puoi anche sostituire il nome del tipo con la sua prima lettera. Per esempio:

ng gm my-new-module per generare un nuovo modulo o ng gc my-new-component per creare un componente.

Costruire / Bundling

Quando hai finito di costruire la tua app Web Angular 2 e desideri installarla su un server Web come Apache Tomcat, tutto ciò che devi fare è eseguire il comando build con o senza il set di flag di produzione. La produzione minimizza il codice e ottimizza per un ambiente di produzione.

ng build

o

ng build --prod

Quindi cerca nella directory root dei progetti una cartella /dist , che contiene la build.

Se desideri i vantaggi di un bundle di produzione più piccolo, puoi anche utilizzare la compilazione di modelli Ahead-of-Time, che rimuove il compilatore di modelli dalla build finale:

ng build --prod --aot

Test unitario

Angular 2 fornisce test unità integrati e ogni elemento creato da angular-cli genera un test unitario di base, che può essere ampliato. I test unitari sono scritti usando il gelsomino ed eseguiti attraverso Karma. Per iniziare il test, eseguire il seguente comando:

ng test

Questo comando eseguirà tutti i test nel progetto e li eseguirà di nuovo ogni volta che un file di origine cambia, sia che si tratti di un test o di un codice dell'applicazione.

Per maggiori informazioni visita anche: pagina github angular-cli