Angular 2 TypeScript-Umgebungseinrichtung

Dieses Kapitel verwendet TypeScript zum Erstellen von Angular-Anwendungen, was auch die offizielle Empfehlung ist. Die Beispiele in diesem Tutorial sind ebenfalls in TypeScript geschrieben.

TypeScript ist eine von Microsoft entwickelte freie und Open-Source-Programmiersprache. Sie ist eine Obermenge von JavaScript und erweitert die Syntax von JavaScript.

Wenn Sie TypeScript nicht kennen, können Sie sich auf die folgenden Ressourcen beziehen:

Bevor Sie beginnen, müssen Sie sicherstellen, dass npm installiert ist. Wenn Sie npm nicht installiert haben oder npm nicht verstehen, können Sie sich unser Tutorial ansehen:Einführung in die Verwendung von NPM。

Da die offizielle npm-Registry in China zu langsam erreichbar ist, habe ich hier den npm-Mirror von Taobao verwendet. Die Installationsmethode ist wie folgt:

$ npm install -g cnpm --registry=https://registry.npmmirror.com

Nach der Ausführung können wir den Befehl cnpm zum Installieren von Modulen verwenden:

$ cnpm install

Schritt 1: Projekt erstellen und konfigurieren

Verzeichnis erstellen

$ mkdir angular-quickstart
$ cd angular-quickstart

Konfigurationsdateien erstellen

Ein Angular-Projekt erfordert die folgenden Konfigurationsdateien:

package.jsonGibt die von diesem Projekt benötigten npm-Abhängigkeitspakete an.
tsconfig.jsonDefiniert, wie der TypeScript-Compiler JavaScript-Code aus den Quelldateien des Projekts generiert.
typings.jsonStellt zusätzliche Definitionsdateien für Bibliotheken bereit, die der TypeScript-Compiler nicht erkennen kann.
systemjs.config.jsVersorgt den Modulloader mit Informationen darüber, wo Anwendungsmodule zu finden sind, und registriert alle erforderlichen Abhängigkeitspakete. Außerdem enthält es Pakete, die für spätere Beispiele in diesem Dokument benötigt werden.

Erstellen Sie die folgenden Dateien in angular-quickstart, wie im Code unten gezeigt:

package.json-Datei:

{ "name": "angular-quickstart", "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", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.3.4", "typings":"^1.3.2" } }

tsconfig.json-Datei:

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

typings.json-Datei:

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

/** * Systemkonfiguration für Angular-Beispiele * Nach Bedarf für Ihre Anwendungsanforderungen anpassen. */ (function (global) { System.config({ paths: { // Pfade dienen als Alias 'npm:': 'node_modules/' }, // map teilt dem System-Loader mit, wo nach Dingen gesucht werden soll map: { // Unsere App befindet sich im Ordner app 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', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, // packages teilt dem System-Loader mit, wie geladen werden soll, wenn kein Dateiname und/oder keine Dateiendung vorhanden ist packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);

Als Nächstes verwenden wir den cnpm-Befehl, um die Abhängigkeitspakete zu installieren:

$ cnpm install

Nach erfolgreicher Ausführung wird im Verzeichnis angular-quickstart ein node_modules-Verzeichnis generiert, das die für dieses Beispiel benötigten Module enthält. Wir können uns die Projektverzeichnisstruktur ansehen:

Schritt 2: Die Anwendung erstellen

Wir verwenden NgModules, um Angular-Anwendungen in funktionsbezogene funktionale Codeblöcke zu organisieren.

Angular selbst ist in separate Angular-Module aufgeteilt, sodass wir in unserer Anwendung nur die Teile von Angular importieren müssen, die wir benötigen.

Jede Angular-Anwendung benötigt mindestens einRoot-Modul, was im Beispiel AppModule ist.

Als Nächstes erstellen wir ein app-Verzeichnis unter dem angular-quickstart-Verzeichnis:

$ mkdir app
$ cd app

Erstellen Sie dann die Datei app.module.ts im app-Verzeichnis, wie im folgenden Code gezeigt:

app.module.ts-Datei:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule { }

Da QuickStart eine im Browser ausgeführte Webanwendung ist, muss das Stammmodul BrowserModule von @angular/platform-browser importieren und es dem imports-Array hinzufügen.

Eine Komponente erstellen und zur Anwendung hinzufügen

Jede Angular-Anwendung hat mindestens eineRoot-Komponente, im Beispiel ist dies AppComponent. Der Code der Datei app.component.ts sieht wie folgt aus:

app.component.ts-Datei:

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

Code-Erklärung:

Der obige Code vonangular2/coreimportiert dasComponent-Paket.
@Componentist derDekoratorvon Angular 2, er verknüpft Metadaten mit der AppComponent-Komponentenklasse.
my-appist ein CSS-Selektor, der in HTML-Tags als Komponente verwendet werden kann.
@viewenthält einTemplate, das Angular anweist, die Ansicht der Komponente zu rendern.
exportgibt an, dass die Komponente außerhalb der Datei verwendet werden kann.

Als Nächstes öffnen wir die Datei app.module.ts erneut, importieren die neue AppComponent und fügen sie den Feldern declarations und bootstrap des NgModule-Dekorators hinzu:

app.module.ts-Datei:

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 { }

Schritt 4: Die Anwendung starten

Als Nächstes müssen wir Angular mitteilen, wie die Anwendung gestartet werden soll.

Erstellen Sie eine main.ts-Datei im Verzeichnis angular-quickstart/app mit folgendem Code:

main.ts-Datei:

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

Der obige Code initialisiert die Plattform, damit Ihr Code ausgeführt werden kann, und startet dann Ihr AppModule auf dieser Plattform.

Die Host-Seite für die Anwendung definieren

Erstellen Sie eine index.html-Datei im Verzeichnis angular-quickstart mit folgendem Code:

Datei index.html:

<html> <head> <title>Angular 2-Beispiel - Beispiel-Tutorial (example.com)</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">   <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>  <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>  <body> <my-app>Laden...</my-app> </body> </html>

Hier sind einige erwähnenswerte Punkte:

JavaScript-Bibliotheken:core-jsist eine Polyfill-Bibliothek für ältere Browser,zone.jsundreflect-metadataDie Bibliothek wird von Angular benötigt, während die SystemJS-Bibliothek für das Laden von Modulen verwendet wird.
Die SystemJS-Konfigurationsdatei und das Skript können das App-Modul importieren und ausführen, das wir gerade in der Hauptdatei geschrieben haben.
Das <my-app>-Tag ist der Ort, an dem die Anwendung geladen wird.

Einige Stile hinzufügen

Wir können die benötigten Stile in der Datei styles.css im Verzeichnis angular-quickstart festlegen:

styles.css Datei:

/* Hauptstile */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; }

Schritt 6: Die Anwendung kompilieren und ausführen

Öffnen Sie ein Terminalfenster und geben Sie den folgenden Befehl ein:

npm start

Besuchen Sie http://localhost:3000/, und der Browser zeigt das folgende Ergebnis an:

Zu diesem Zeitpunkt ist unsere erste Angular 2-Anwendung erstellt. Die finale Verzeichnisstruktur sieht wie folgt aus:

Der in diesem Artikel verwendete Quellcode kann über die folgende Methode heruntergeladen werden und enthält nicht die Verzeichnisse node_modules und typings.

Quellcode-Download