Introduzione ad Angular CLI e alla creazione di un progetto Angular2+

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

17. Angular 4
HelloAngular

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