Guida angularjs2 italiano – Parte 1: Installazione e configurazione

Primi passi con Angularjs 2? Nella guida di oggi vediamo come installare Angularjs 2 –  successore del noto framework JS  – in pochi semplici step.

Step 1: Installiamo NodeJS

La nuova versione di AngularJs richiede di avere NodeJs installato. Per chi non conoscesse NodeJs vi invito a visionare questo articolo.

Installa NODEJS (Consiglio versione LTS) –> Clicca qui

Step 2: Creazione cartella di progetto

Creazione cartella dove far risiedere la nostra app in questo esempio: creo la cartella angularjs2 all’interno del mio XAMPP/HTDOCS

//Apri il terminale e digita i seguenti comandi
cd C:\\xampp\htdocs
mkdir angularjs2
cd angularjs2

Step 3: Creazione dei file essenziali e di configurazione di AngularJs

package.json: identifica le dipendenze del progetto
tsconfig.json configura typescript
typings.json librerie aggiuntive typescript
systemjs.config.js carica i moduli e inizializza

Ecco cosa mettere “dentro” questi 4 file:

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.0.2",
    "@angular/compiler": "~2.0.2",
    "@angular/core": "~2.0.2",
    "@angular/forms": "~2.0.2",
    "@angular/http": "~2.0.2",
    "@angular/platform-browser": "~2.0.2",
    "@angular/platform-browser-dynamic": "~2.0.2",
    "@angular/router": "~3.0.2",
    "@angular/upgrade": "~2.0.2",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings":"^1.4.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Step 4: Installazione

Da terminale avvia l’installazione:

npm install

Attendi fino al completamento.

NOTA: Se per qualche ragione non venisse creata la cartella typings fai andare il seguente comando:

npm run typings install

Step 5: Creazione della cartella APP

Creiamo la cartella “app” e posizioniamo al suo interno i seguenti file

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
 imports: [ BrowserModule ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Step 6: Il nostro index.html

Generiamo il file index.html

Posizioniamo il file index.html nella root del progetto:

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

La struttura di base della nostra “matrice” è molto semplice per ora: Una volta caricato il sistemjs.config (che a sua volta richiama tutto il sistema) all’interno del body andiamo a implementare il tag my-app che di fatto è dove verranno renderizzate le pagine della nostra applicazione.

Qualora volessimo stilizzare possiamo semplicemente aggiungere i nostri css o direttamente inline tramite tag style oppure anche con css esterni come siamo abituati.

Step 7: avvio dell’applicazione

A questo punto digitate da terminale:

npm start

Qualora fosse richiesto date il consenso ad abilitare nodejs sul firewall, dopodichè a schermo dovreste vedere la vostra -prima- applicazione angularjs!

Grazie a lite-server tutte le modifiche al codice che fate saranno “viste” e il vostro browser refresherà in modo selettivo la pagina, molto comodo soprattutto in fase di prototyping e dev.

NOTA: Se una volta avviato viene restituito l’errore: “Cannot GET / ” significa che hai posizionato il file index.html all’interno della cartella APP…ricorda che il file index.html deve essere posizionato dentro la root del progetto…nel nostro esempio all’interno della cartella “angularjs2”.

Hai bisogno di approfondire AngularJS2? Ecco il sito ufficiale

Vuoi generare in un solo click tutto l’ecosistema angularjs2 per un avvio rapido? Visita questo progetto.

Ovviamente questo articolo è da ritenersi solo un “fast-start” per i vostri progetti, in quanto ci sarebbe da approfondire molto – ad esempio – la funzione dei singoli file che abbiamo creato etc. Tuttavia ritengo – sopratutto in una prima fase di startup e valutazione – concentrare l’attenzione più sulla pratica che sulla teoria.

Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!

Photo credits “angularjs” disponibile su Shutterstock