Angular 2 Tutorial
Iniziare con Angular 2

Osservazioni

Versioni

Installare angular2 con angular-cli

Questo esempio è una rapida configurazione di Angular 2 e come generare un progetto di esempio rapido.

Prerequisiti:

• Node.js v4 o versioni successive .
• npm v3 o maggiore o filato .

Apri un terminale ed esegui i comandi uno a uno:

npm install -g @angular/cli

o

yarn global add @angular/cli

a seconda della scelta del gestore pacchetti.

Il comando precedente installa @ angular / cli a livello globale, aggiungendo l'eseguibile ng a PATH.

Per impostare un nuovo progetto

Navigare con il terminale in una cartella in cui si desidera impostare il nuovo progetto.

Esegui i comandi:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Cioè, ora hai un semplice progetto di esempio realizzato con Angular 2. Ora puoi navigare al link visualizzato nel terminale e vedere cosa sta facendo.

Per aggiungere a un progetto esistente

Passa alla radice del tuo progetto attuale.

Esegui il comando:

ng init

Questo aggiungerà l'impalcatura necessaria al tuo progetto. I file verranno creati nella directory corrente, quindi assicurati di eseguirlo in una directory vuota.

Esecuzione del progetto a livello locale

Per vedere e interagire con la tua applicazione mentre è in esecuzione nel browser, devi avviare un server di sviluppo locale che ospita i file per il tuo progetto.

ng serve

Se il server è stato avviato correttamente, dovrebbe visualizzare un indirizzo al quale è in esecuzione il server. Di solito è questo:

http://localhost:4200

Subito dopo questo server di sviluppo locale è collegato a Hot Module Reloading, quindi qualsiasi modifica a html, typescript o css attiverà il browser per essere ricaricato automaticamente (ma può essere disabilitato se lo si desidera).

Generazione di componenti, direttive, condotte e servizi

Il comando ng generate <scaffold-type> <name> (o semplicemente ng g <scaffold-type> <name> ) consente di generare automaticamente componenti angolari:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Esistono diversi tipi di scaffold che angular-cli può generare:

Puoi anche sostituire il nome del tipo con la sua prima lettera. Per esempio:

ng gm my-new-module per generare un nuovo modulo o ng gc my-new-component per creare un componente.

Costruire / Bundling

Quando hai finito di costruire la tua app Web Angular 2 e desideri installarla su un server Web come Apache Tomcat, tutto ciò che devi fare è eseguire il comando build con o senza il set di flag di produzione. La produzione minimizza il codice e ottimizza per un ambiente di produzione.

ng build

o

ng build --prod

Quindi cerca nella directory root dei progetti una cartella /dist , che contiene la build.

Se desideri i vantaggi di un bundle di produzione più piccolo, puoi anche utilizzare la compilazione di modelli Ahead-of-Time, che rimuove il compilatore di modelli dalla build finale:

ng build --prod --aot

Test unitario

Angular 2 fornisce test unità integrati e ogni elemento creato da angular-cli genera un test unitario di base, che può essere ampliato. I test unitari sono scritti usando il gelsomino ed eseguiti attraverso Karma. Per iniziare il test, eseguire il seguente comando:

ng test

Questo comando eseguirà tutti i test nel progetto e li eseguirà di nuovo ogni volta che un file di origine cambia, sia che si tratti di un test o di un codice dell'applicazione.

Per maggiori informazioni visita anche: pagina github angular-cli

Iniziare con Angular 2 senza angular-cli.

Angolare 2.0.0-rc.4

In questo esempio creeremo un "Hello World!" app con un solo componente root ( AppComponent ) per semplicità.

Prerequisiti:

• Node.js v5 o successivo
• npm v3 o successivo

Nota: è possibile verificare le versioni eseguendo il node -v e npm -v nella console / terminale.

Passo 1

Crea e inserisci una nuova cartella per il tuo progetto. Chiamiamolo angular2-example .

mkdir angular2-example
cd angular2-example

Passo 2

Prima di iniziare a scrivere il nostro codice app, aggiungeremo i 4 file forniti di seguito: package.json , tsconfig.json , typings.json e systemjs.config.js .

Dichiarazione di non responsabilità: gli stessi file possono essere trovati nel Quickstart ufficiale di 5 minuti .

package.json - Ci consente di scaricare tutte le dipendenze con npm e offre una semplice esecuzione di script per semplificare la vita di progetti semplici. (Dovresti considerare di usare qualcosa come Gulp in futuro per automatizzare le attività).

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - Configura il traspolatore TypeScript.

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

typings.json - Rende a TypeScript le librerie che stiamo usando.

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

systemjs.config.js - Configura SystemJS (puoi anche usare il webpack ).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Passaggio 3

Installiamo le dipendenze digitando

npm install

nella console / terminale.

Passaggio 4

Crea index.html all'interno della cartella di angular2-example .

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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></my-app>
  </body>
</html>

La tua applicazione verrà visualizzata tra i tag my-app .

Tuttavia, Angular continua a non sapere cosa renderizzare. Per dirlo, definiremo AppComponent .

Passaggio 5

Crea una sottocartella chiamata app cui possiamo definire i componenti e i servizi che compongono la nostra app. (In questo caso, sarà solo contiene AppComponent codice e main.ts .)

mkdir app

Passaggio 6

Creare l' app/app.component.ts file app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

Cosa sta succedendo? Per prima cosa, stiamo importando il decoratore @Component che usiamo per dare a Angular il tag e il modello HTML per questo componente. Quindi, stiamo creando la classe AppComponent con variabili di title e messages che possiamo utilizzare nel modello.

Ora diamo un'occhiata a quel modello:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

Stiamo visualizzando la variabile title in un tag h1 e quindi facendo una lista che mostra ogni elemento dell'array dei messages usando la direttiva *ngFor . Per ogni elemento dell'array, *ngFor crea una variabile di message che usiamo all'interno dell'elemento li . Il risultato sarà:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

Passaggio 7

Ora creiamo un file main.ts , che sarà il primo file main.ts da Angular.

Crea l' app/main.ts file app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Stiamo importando la funzione bootstrap e la classe AppComponent , quindi utilizzando il bootstrap per indicare a Angular quale componente utilizzare come root.

Passaggio 8

È ora di avviare la tua prima app. genere

npm start

nella tua console / terminale. Questo eseguirà uno script preparato da package.json che avvia lite-server, apre l'app in una finestra del browser ed esegue il traspolatore TypeScript in modalità orologio (quindi i file .ts verranno transpiled e il browser si aggiornerà quando salverete le modifiche) .

E adesso?

Controlla la guida ufficiale di Angular 2 e gli altri argomenti sulla documentazione di StackOverflow .

È inoltre possibile modificare AppComponent per utilizzare modelli esterni, stili o aggiungere / modificare variabili componenti. Dovresti vedere le tue modifiche subito dopo aver salvato i file.

Mantenere i Visual Studio sincronizzati con gli aggiornamenti NPM e NODE

Passaggio 1: individuare il download di Node.js, in genere viene installato in C: / program files / nodejs

Passaggio 2: apri Visual Studio e vai a "Strumenti> Opzioni"

Passaggio 3: nella finestra delle opzioni, passare a "Progetti e soluzioni> Strumenti Web esterni"

Passaggio 4: aggiungere una nuova voce con il percorso del file Node.js (C: / program files / nodejs), IMPORTANTE utilizzare i pulsanti freccia nel menu per spostare il riferimento in cima all'elenco.

Passaggio 5: riavviare Visual Studios ed eseguire un'installazione npm, contro il progetto, dalla finestra di comando npm

Superare quel fastidioso proxy aziendale

Se stai tentando di ottenere un sito Angular2 in esecuzione sul tuo computer Windows su XYZ MegaCorp, è probabile che tu stia riscontrando problemi nel superare il proxy aziendale.

Ci sono (almeno) due gestori di pacchetti che devono passare attraverso il proxy:

1. NPM
2. tipizzazioni

Per NPM è necessario aggiungere le seguenti righe al file .npmrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

Per Digitazioni è necessario aggiungere le seguenti righe al file .typingsrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

Probabilmente questi file non esistono ancora, quindi puoi crearli come file di testo vuoti. Possono essere aggiunti alla radice del progetto (stesso posto di package.json oppure puoi metterli in %HOMEPATH% e saranno disponibili per tutti i tuoi progetti.

Il bit che non è ovvio ed è il motivo principale per cui le persone pensano che le impostazioni del proxy non funzionino è il %5C che è la codifica dell'URL di \ per separare il dominio e i nomi utente. Grazie a Steve Roberts per quello: Utilizzando npm dietro proxy aziendale .pac

Iniziare con Angular 2 con node.js / expressjs backend (esempio http incluso)

Creeremo un semplice "Hello World!" app con Angular2 2.4.1 ( @NgModule change) con un backend node.js (expressjs).

Prerequisiti

• Node.js v4.xx o successivo
• npm v3.xx o superiore o filato

Quindi eseguire npm install -g typescript o yarn global add typescript per installare typescript a livello globale

Roadmap

Passo 1

Crea una nuova cartella (e la directory principale del nostro back-end) per la nostra app. Chiamiamolo Angular2-express .

riga di comando :

mkdir Angular2-express
cd Angular2-express

Passo 2

Crea il package.json (per le dipendenze) e app.js (per il bootstrap) per la nostra app node.js

package.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

Quindi eseguire npm install o un yarn npm install per installare le dipendenze.

Ora la nostra struttura di back-end è completa. Passiamo al front-end.

Fase 3

Il nostro front-end dovrebbe trovarsi in una cartella chiamata front nella nostra cartella Angular2-express .

riga di comando:

mkdir front
cd front

Proprio come abbiamo fatto con il nostro back-end, il nostro front-end ha bisogno anche dei file di dipendenza. Andiamo avanti e creare i seguenti file: package.json , systemjs.config.js , tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    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'
      }
    }
  });
})(this);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

Quindi eseguire npm install o un yarn npm install per installare le dipendenze.

Ora che i nostri file di dipendenza sono completi. Passiamo al nostro index.html :

index.html:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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>

Ora siamo pronti per creare il nostro primo componente. Crea una cartella denominata app nella nostra cartella front .

riga di comando:

mkdir app
cd app

Facciamo i seguenti file denominati main.ts , app.module.ts , app.component.ts

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

Dopo questo, compila i file dattiloscritti in file javascript. Vai su 2 livelli dalla cartella corrente (all'interno della cartella Angular2-express) ed esegui il comando seguente.

riga di comando:

cd ..
cd ..
tsc -p front

La nostra struttura di cartelle dovrebbe essere simile a:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

Infine, all'interno della cartella Angular2-express, eseguire il comando node app.js nella riga di comando. Apri il tuo browser preferito e controlla localhost:9999 per vedere la tua app.

Immergiti in Angular 4!

Angular 4 è ora disponibile! In realtà Angular usa semver dal Angular 2, che richiede che il numero maggiore venga aumentato quando vengono introdotte le modifiche di rottura. Il team di Angular ha posticipato le funzionalità che causano modifiche alle interruzioni, che verranno rilasciate con Angular 4. Angular 3 è stato saltato per poter allineare i numeri di versione dei moduli core, poiché il router aveva già la versione 3.

Come per il team Angular, le applicazioni Angular 4 saranno meno dispendiose e più veloci di prima. Hanno un pacchetto di animazione separato dal pacchetto @ angular / core. Se qualcuno non utilizza il pacchetto di animazione, lo spazio extra di codice non finirà nella produzione. La sintassi dell'associazione modello ora supporta la sintassi di stile / else. Angular 4 è ora compatibile con la versione più recente di Typescript 2.1 e 2.2. Quindi, Angular 4 sarà più eccitante.

Ora ti mostrerò come eseguire l'installazione di Angular 4 nel tuo progetto.

Iniziamo la configurazione angolare con tre diversi modi:

Puoi usare Angular-CLI (Command Line Interface), installerà tutte le dipendenze per te.

• È possibile migrare da Angular 2 a Angular 4.

• Puoi usare github e clonare la piastra di cottura Angular4. (È il più semplice.)

• Impostazione angolare utilizzando Angular-CLI (Command Line Interface).

Prima di iniziare a utilizzare Angular-CLI, assicurarsi di aver installato il nodo nel computer. Qui, sto usando il nodo v7.8.0. Ora, apri il terminale e digita il seguente comando per Angular-CLI.

npm install -g @angular/cli

o

yarn global add @angular/cli

a seconda del gestore di pacchetti che usi.

Installiamo Angular 4 usando Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-boilerplate Siamo tutti impostati per Angular 4. Il suo metodo abbastanza semplice e diretto

Impostazione angolare migrando da Angular 2 a Angular 4

Ora vediamo il secondo approccio. Ti mostrerò come migrare Angular 2 in Angular 4. Per questo hai bisogno di clonare qualsiasi progetto Angular 2 e aggiornare le dipendenze Angular 2 con la dipendenza di Angular 4 nel tuo pacchetto.json come segue:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

Queste sono le principali dipendenze per Angular 4. Ora è possibile installare npm e quindi npm avviare l'applicazione. Per riferimento my package.json.

Configurazione angolare dal progetto github

Prima di iniziare questo passaggio assicurati di aver installato git nel tuo computer. Apri il tuo terminale e clona l'angolare4-boilerplate usando il comando seguente:

[email protected]:CypherTree/angular4-boilerplate.git

Quindi installare tutte le dipendenze ed eseguirlo.

npm install

npm start

E hai finito con l'installazione di Angular 4. Tutti i passaggi sono molto semplici in modo da poterli scegliere.

Struttura della directory della piastra angolare4

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

Comprensione di base per la struttura delle directory:

Tutto il codice risiede nella cartella src.

la cartella dei mock è per i dati falsi che vengono utilizzati a scopo di test.

la cartella del modello contiene la classe e l'interfaccia utilizzata nel componente.

la cartella modules contiene l'elenco di componenti come app, login, widget ecc. Tutto il componente contiene dattiloscritto, html e css file. index.ts è per esportare tutta la classe.

la cartella servizi contiene l'elenco dei servizi utilizzati nell'applicazione. Ho separato il servizio di riposo e il servizio di componenti diversi. Nel servizio di riposo contiene diversi metodi http. Il servizio di accesso funge da mediatore tra il componente di accesso e il servizio di assistenza.

il file app.routing.ts descrive tutti i possibili percorsi per l'applicazione.

app.module.ts descrive il modulo app come componente root.

bootstrap.ts eseguirà l'intera applicazione.

la cartella webpack contiene il file di configurazione del webpack.

Il file package.json è per tutti gli elenchi di dipendenze.

karma contiene la configurazione del karma per il test dell'unità.

node_modules contiene un elenco di pacchetti di pacchetti.

Iniziamo con il componente di accesso. In login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

In login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

Dobbiamo esportare questo componente in index.ts.

export * from './login/login.component';

abbiamo bisogno di impostare percorsi per il login in app.routes.ts

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

Nel componente root, il file app.module.ts ti serve solo per importare quel componente.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

e dopo l'installazione di npm e l'avvio di npm. Ecco qui! Puoi controllare la schermata di login nel tuo localhost. In caso di difficoltà, è possibile fare riferimento all'angolare4-boilerplate.

Fondamentalmente riesco a percepire meno pacchetti costruttivi e una risposta più rapida con l'applicazione Angular 4 e sebbene abbia trovato Esattamente simile a Angular 2 nella codifica.