Come creare un'applicazione Angular 4 / Sgart.it

Angular 4 è l'evoluzione di Angular JS di cui mantiene i concetti, ma non la compatibilità. Infatti è basato su TypeScript e per funzionare sui browser deve essere compilato in una versione di JavaScript supportata (attualmente ES5).

Volendo è possibile utilizzare anche JavaScript o Dart ma è fortemente consigliato l'uso di TypeScript

La versione 4 è compatibile con la versione 2, di cui rappresenta un miglioramento in termini di performance, oltre ad aver riorganizzato la struttura di alcuni moduli. Ad esempio "animation" nella versione 4 non è più compresa nel core ma è un modulo a parte.

Per creare un applicazione Angular 4 sono necessari dei prerequisiti quali:

installare Node JS
intallare un editor, può andare bene notepad ma... molto meglio Visual Studio Code
installare Angular CLI (a command line interface for Angular)

Node JS installa il comando npm (node package manager)

Angular CLI è una utility a linea di comando che permette di generare il template di un'applicazione Angular 4.

Per creare una nuova applicazione usare ng new nomeApplicazione:

cd c:\...\folderProgettiAngular
ng new sgart-angular4
cd sgart-angular4
code .

crea una cartella con la seguente struttura:

e2e
app.e2e-spec.ts
app.po.ts
tsconfig.e2e.json
node_modules
vari folder con i moduli necessari
src
app
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
assets
.gitkeep
environments
environment.prod.ts
environment.ts
favicon.ico
index.html
main.ts
polyfills.ts
styles.css
test.ts
tsconfig.app.json
tsconfig.spec.json
typings.d.ts
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
package.json
protractor.conf.js
README.md
tsconfig.json
tslint.json

Le cartelle principali sono src, che contiene il sorgente dell'applicazione, e node_modules che contiene tutti moduli necessari al funzionamento in produzione e per la creazione dell'ambiente di test. La cartella e2e gestisce il test della user interface (Protractor).

Per quanto riguarda i file, il principale è package.json, può essere considerato l'equivalente del file .csproj di Visual Studio.
Contiene informazioni relative al progetto, quali il nome, la versione, ecc..., oltre all'elenco completo dei pacchetti Node JS installati nella cartella node_modules.

La cartella node_modules NON va aggiunta ad un eventuale source control in quanto può essere ricostruita con il comando npm install. Se invece serve solo un aggiornamento npm update.

Il file package.json è il seguente:

{
  "name": "sgart-angular4",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Gli altri file sono:

.angular-cli.json contine la definizione del template generato con Angular CLI
.editorconfig configurazione dell'editor di Visual Studio Code
.gitignore relativo al source control Git
karma.conf.js unit test
protractor.conf.js user interface test (vedi cartella e2e)
tsconfig.json configurazione di TypeScript
tslint.json tool per la validazione di alcune regole di formattazione/stile del codice TypeScript

La cartella src contiene i seguenti file principali:

main.ts punto di ingresso dell'applicazione angular (fa il bootstrap di angular)
app/app.module.ts si tratta del modulo principale dell'appplicazione. Qui vengono definiti il componente principale di partenza, gli eventuali altri componenti, i providers (services), gli import dei moduli necessari, le route, ecc...
app/app.component.ts è il componente principale (root)
app/app.component.html la view html associata al componente principale (definisce il nome del tag html, vedi proprietà selector)
app/app.component.css il css associato al componente principale
app/app.component.spec.ts unit test del componente principlale
index.html la pagina dell'applicazione che contiene il tag app-root (il componente principale app/app.component.ts)

In un applicazione reale si avranno sicuramente più componenti e servizi di accesso ai dati. Quindi, per una migliore organizzazione del progetto, conviene creare ulteriori cartelle sotto src/app:

components per contenere tuttl i componenti aggiuntivi, ogni uno a sua volta in una sotto cartella
services i servizi per la connesione con sorgenti dati esterne (tipicamente chimate rest s ervizi json)

Un esempio è questo

src
app
components
about
about.component.css
about.component.html
about.component.spec.ts
about.component.ts
userr
user....
services
data.service.spec.ts
data.service.ts

Per aggiungere nuovi componenti o servizi puoi usare Angular CLI ng generate:

cd .....\sgart-angular4

mkdir src/app/components
ng generate component components/user

mkdir src/app/services
ng generate service services/data

Una volta aggiunto un componente o servizio va modificato il file app.modules.ts per aggiungere la referenza, ad esempio:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { RouterModule, Routes } from '@angular/router'

import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';

import { DataService } from './services/data.service';
import { AboutComponent } from './components/about/about.component';

const appRoutes: Routes=[
  {path:'', component:UserComponent},
  {path:'about', component:AboutComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Questa è giusto una breve descrizione della struttura di un progetto Angular 4, adesso vediamo come eseguirlo.

Per vedere l'applicazione in azione, dalla command line, digita ng serve:

cd .....\sgart-angular4
ng serve

Può essere eseguito direttamente dal terminale integrato di VS Code, menu View \ Integrated terminal

Il comando, compila i file TypeScript e fa partire un web server che risponde all'indirizzo http://localhost:4200.
Attiva anche un processo che monitora costantemente se vengono apportati dei cambiamenti al codice sorgente e invoca subito una ricompilazione e un aggiornamento della pagina nel browser. Utile durante la fase di sviluppo.

Per avere una versione di produzione, digita il comando:

ng build -prod

crea sotto la cartella /dist tutti i file necessari per l'ambiente di produzione.

Per chi arriva da Angular JS a un primo impatto il processo può sembrare molto complicato, ma porta con se dei vantaggi quali:

è molto più veloce, soprattutto nel caso di applicazioni complesse
il codice è compilato e ottimizzato
le view html non devono essere parsate e compilate dal browser prima di essere utlizzate in quanto sono pre compilate in JavaScript quindi il processo di bootstrap è più veloce
viene utilizzato TypeScript che è un super set di JavaScript con il supporto alla tipizzazione dei dati, classi, ecc... che rende più agevole la scrittura del codice e riduce gli errori in fase di scrittura

Per maggiori info vedi il sito ufficiale Angular