Come creare un'applicazione Angular 4

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).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)

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:

DOS / Batch fileCopia

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.Il file package.json è il seguente:

JavaScriptCopia

{
  "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:

DOS / Batch fileCopia

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:

JavaScriptCopia

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:

DOS / Batch fileCopia

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

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:

DOS / Batch fileCopia

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