Introduzione ad Angular CLI
1 like221 views
Il documento fornisce un'introduzione ad Angular CLI, uno strumento per creare e gestire progetti Angular in modo semplificato. Viene spiegato come utilizzare vari comandi per generare progetti, bundle e componenti, evidenziando l'importanza di Webpack per ottimizzare le risorse. Inoltre, si menzionano diversi editor di codice suggeriti, come WebStorm e Visual Studio Code.
![in collaborazione conAngular CLI 22
/* src/app/app.module.ts */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }](https://image.slidesharecdn.com/03-angularcli-180129080705/85/Introduzione-ad-Angular-CLI-22-320.jpg)
![in collaborazione conAngular CLI 24
/* src/app/app.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}](https://image.slidesharecdn.com/03-angularcli-180129080705/85/Introduzione-ad-Angular-CLI-24-320.jpg)
Introduzione ad Angular CLI
- 1. Angular 4 Introduzione ad Angular CLI
- 2. in collaborazione conAngular CLI 2 Angular CLI (Command Line Interface) ci permette di creare un nuovo progetto Angular 2/4+ già pronto e configurato secondo un blueprint ben definito.
- 3. 1. LISTA DELLA SPESA in collaborazione conAngular CLI 3
- 4. in collaborazione conAngular CLI TypeScript npm install -g typescript https://www.typescriptlang.org/ 4
- 5. in collaborazione conAngular CLI Angular CLI npm install -g @angular/cli https://cli.angular.io/ 5
- 6. in collaborazione conAngular CLI WebStorm https://www.jetbrains.com/webstorm/ 6
- 7. in collaborazione conAngular CLI Visual Studio Code https://code.visualstudio.com/ 7 ...consiglio però vivamente WebStorm!!!
- 8. in collaborazione conAngular CLI 8 Angular CLI si basa su Webpack, module bundler fortemente utilizzato in ambiente React. Webpack permette di collezionare tutti i file richiesti (librerie, file css, immagini, ecc) e di creare dei bundle (pacchetti) per ogni tipologia di risorsa.
- 9. in collaborazione conAngular CLI 9 Grazie a Webpack, il progetto finale sarà composto da pochissimi file, in quanto è Webpack stesso che li unisce e li ottimizza a seconda del tipo. Solitamente, un'applicazione Angular è composta da 4 bundle: se non ci fosse Webpack, la nostra applicazione avrebbe centinaia di file da caricare, con enormi problemi di performance (oltre che di gestione del progetto).
- 10. in collaborazione conAngular CLI ng new AppName Crea un nuovo progetto Angular chiamato AppName. Crea automaticamente la cartella AppName e imposta il prefisso dell'app di default (app-) 10
- 11. in collaborazione conAngular CLI ng new AppName --prefix my È possibile indicare un proprio prefisso al posto di app- utilizzando il flag --prefix 11
- 12. in collaborazione conAngular CLI ng new AppName --style scss È possibile indicare l'uso di pre- processori CSS (sass, less, ecc.) invece di CSS puro, utilizzando il flag --style 12
- 13. in collaborazione conAngular CLI ng serve Avvia il server di sviluppo. Per tutti i parametri possibili: ng serve -h 13
- 14. in collaborazione conAngular CLI ng build Crea il pacchetto finale. Per tutti i parametri possibili: ng build -h 14
- 15. in collaborazione conAngular CLI 15 Angular CLI permette di gestire, inoltre, la creazione di tutti i costrutti necessari per un'applicazione. Componenti, service, classi, pipes e tutti gli altri costrutti possono venir generati e gestiti automaticamente.
- 16. in collaborazione conAngular CLI ng generate ... Permette di generare un costrutto di Angular (component, service, pipe, ecc). 16
- 18. in collaborazione conAngular CLI 1. BOOTSTRAP 18
- 19. in collaborazione conAngular CLI ng new HelloAngular 19 Se devi utilizzare SASS: ng new HelloAngular --style=scss
- 20. in collaborazione conAngular CLI 20 /* src/main.ts */ import { platformBrowserDynamic } from '@angular/platform-browser- dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
- 21. 2. @NgModule in collaborazione conAngular CLI 21
- 22. in collaborazione conAngular CLI 22 /* src/app/app.module.ts */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 23. 3. ROOT COMPONENT in collaborazione conAngular CLI 23
- 24. in collaborazione conAngular CLI 24 /* src/app/app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }
- 25. in collaborazione conAngular CLI © 2017 - Giovanni Buffa 25