Tempo di lettura: 7 minuti
Nel precedente articolo abbiamo preparato l’ambiente di sviluppo per poter lavorare con Angular scaricando l’ide a noi più congeniale , node js, bootstrap,Sass. Ora è giunto il momento di realizzare un’applicazione Angular grazie al software ANGULAR CLI il cui sito ufficiale è https://cli.angular.io/ .
Questo si basa su Node js e ci consente di assemblare la base del nostro applicativo. Per installarlo da linea di comando digitate :
npm install –g angular-cli dove il prefisso g fa si che questi venga installato globalmente quindi non all’interno della root del progetto bensì in un percorso denominato prefix che varia a seconda del sistema operativo installato. Ciò consente di lanciare gli eseguibili senza specificarne il percorso.
Una volta installato ANGULAR CLI possiamo creare il progetto vero e proprio,create una cartella,io ad esempio ho creato CorsoAngular, da terminale spostatevi al suo interno utilizzando i comandi dos dove con cd nome cartella entri nella sotto cartella, mentre con cd.. entri nella cartella padre.
Questo perché il progetto verrà creato nella stessa cartella in cui lancerai il comando. Lanciate il comando: ng new myapp,tieni presente che il nome da dare all’applicazione deve essere in minuscolo, non deve contenere spazi,caratteri alfanumerici e altri simboli. Ci vorranno alcune decine di secondi in quanto devono essere scaricati diversi pacchetti npm. Se tutto è andato a buon fine all’interno della cartella CorsoAngular ora c’è la cartella dell’App appena creata ossia myapp strutturata nel seguente modo:
Nella prossima sezione ne analizzeremo un paio, per gli approfondimenti vi rimando al sito ufficiale di Angular all’indirizzo https://angular.io/ ,visto che la guida ha lo scopo di fornire all’utente le basi per poter essere produttivo da subito senza perdersi nei meandri della teoria che alla lunga potrebbe risultare noioso e fuorviante.
ALCUNI ELEMENTI DI ANGULAR CLI
.editconfig
Tool che indica al nostro editor come leggere i file e quindi di uniformare lo stile del codice indipendentemente dal software utilizzato.
# Editor configuration, see http://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false
dove root impostato a true indica la presenza del file nella root del progetto.
I selettori [*] e[*md] impostano lo style del codice rispettivamente per tutti i file e per i soli file .md.
Comunque sia non modificatelo.
.gitignore
E’ facile intuire che questo file indica a git cosa ignorare ,esso contiene percorsi e directory che verranno ignorati e non sottoposti a controlli di versione in caso di aggiornamento.
.karma.conf.js
Questo file è realizzato dal team di Angular in node js con lo scopo di effettuare test applicativi,verificando ad esempio il corretto funzionamento del nostro codice ed interfacciandosi con i vari browser per verificare che il nostro progetto sia effettivamente cross-browser. Viene eseguito da riga di comando digitando: ng test
Se tutto è andato a buon fine vi restituirà una finestra tipo questa:
Per uscire digitate CTRC+C.
.angular.json
Questo file definisce la struttura di base del progetto creato in angular cli:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "myapp"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Dove ad esempio su project posiamo trovare il nome del progetto,root ,definita dal path src,contiene i sorgenti in cui verrà creata l’applicazione.
Outdir è la directory che conterrà l’applicazione pronta per la produzione, definita dalla directory dist.
Se aprite la cartella src vi troverai tutta una serie di file che impareremo a conoscere man mano che andremo avanti:
AVVIARE IL SERVER DI ANGULAR
Per lanciare un’applicazione angular è necessario aprire un server che ti reindirizzi alla pagina http://localhost:4200. Quindi ,sempre tramite terminale,spostatevi all’interno della root del progetto e digitate ng serve, ci vorranno una decina di secondi, se tutto è andato a buon fine riceverete una serie di messaggi come in figura:
Quindi aprite il browser all’indirizzo http://localhost:4200/ e vi si apre la home page dell’applicazione Angular come sotto:
E’ chiaro che se non si dovesse aprire la pagina ,come in figura, qualche cosa è andata storta,quindi riprovate.
Man mano che aggiornerete l’applicazione , automaticamente si aggiornerà anche la pagina visualizzata, anche se può capitare che le ultime versioni di angular-cli non funzionino correttamente, in tal caso bisogna aspettare che vengano corretti eventuali bug.
Comunque il file che viene caricato è il file index.html presente all’interno della cartella radice del nostro progetto,anche se all’apparenza potrebbe sembrare un file come un altro se ispezionate la pagina del browser noterete la presenza di un tag strano :<app-root>.
Questo non è altro che un potenziamento del codice html il quale ,non appena il browser carica la pagina, sarà trasformato da Angular in modo tale da essere correttamente interpretato sulla bese di informazioni che man mano inseriremo nell’applicazione.
Per chiudere il server digitate CTRC+C (se vi ricordate come in ng test nel caso del file karma.js).
COMANDI ESSENZIALI DI ANGULAR-CLI
- Creare una nuova app: ng new nomeApp
- Testare l’applicazione in locale: ng serve(ricordatevi che va eseguito all’interno della root della vostra applicazione)
- Creare nuovi elementi dell’app: ng g component nome Componente
- Creare una direttive: ng g directive nome Direttiva
- Crerare un pipe: ng g pipe nome Pipe
- Creare un service: ng g service nome Service
- Creare una classe : ng g class nome classe
- Creare un interfaccia : ng g interface nome Interfaccia
- Creare un modulo: ng g module nome Modulo
- Fare test: ng test
Infine per aggiornare Angular cli è necessario aggiornare sia il pacchetto locale che quello globale, quindi nel caso di un pc con sistema operativo windows:
pacchetto globale:
- npm unistall –g @angular/cli
- npm cache clean
- npm install – g @angular/cli@latest
pacchetto locale:
- npm install –save-dev @angular/cli@latest
