Eine kurze Einführung in die Verwendung von angle2_AngularJS

Lassen Sie uns von vorne beginnen und eine supereinfache AngularJs 2-Anwendung mit Typescript erstellen.

Führen Sie zuerst eine DEMO durch

Führen Sie diese DEMO ausErleben wir zunächst die AngularJS2-Anwendung.

Das Folgende ist die Dateistruktur dieser Anwendung

angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md

Zusammenfassend lässt sich sagen, dass es sich um eine index.html-Datei und zwei Typescript-Dateien unter der App-Datei handelt.

Im Folgenden werden wir Schritt für Schritt ein solches Programm erstellen:

1. Konfigurieren unserer Entwicklungsumgebung
2. Angular-Initialisierungskomponente schreiben
3. Leiten Sie es so, dass es unsere Hauptseite „index.html“ steuert
4. Index.html-Seite schreiben

Einrichtung der Entwicklungsumgebung

Ordner erstellen

mkdir angular2-app
cd  angular2-app

TYPESCRIPT konfigurieren

Einige spezielle Einstellungen sind erforderlich, um Typesript beim Kompilieren zu unterstützen.
Erstellen Sie eine neue tsconfig.json-Datei, legen Sie sie im Projektstammverzeichnis ab und geben Sie die Konfiguration

ein

{
 "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
 },
 "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
 ]
}

Wir werden diese tsconfig.json später im Anhang ausführlich erklären

TYPSCHREIBEN

Es gibt viele Javascript-Bibliotheken, die einige Javascript-Umgebungsvariablen und -Syntax erben, der Typescript-Compiler kann diese jedoch nicht nativ unterstützen. Daher verwenden wir Typescript-Typdefinitionsdateien – d.ts-Dateien (z. B. typings.json), um diese Kompatibilitätsprobleme zu lösen.

Erstellen Sie die Datei „typings.json“ und legen Sie sie im Stammverzeichnis des Projekts ab

{
 "ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
 }
}

Ebenso wird es im Anhang eine ausführlichere Erklärung geben

Fügen Sie die benötigten Bibliotheken hinzu

Wir empfehlen die Verwendung von npm zur Verwaltung unserer abhängigen Bibliotheken.
Erstellen Sie eine package.json-Datei im Projektstammverzeichnis

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",  
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

Im Anhang gibt es eine ausführlichere Erklärung

Um diese Abhängigkeitspakete zu installieren, führen Sie einfach

aus

npm install

Damit haben wir die Einrichtung unserer Entwicklungsumgebung abgeschlossen.

Die erste ANGULAR-Komponente

Komponente ist das grundlegendste Konzept in Angular. Eine Komponente enthält eine Ansicht – die Seite, die wir zum Anzeigen von Informationen oder zur Durchführung der Benutzerinteraktion verwenden. Technisch gesehen ist eine Komponente eine Klasse, die eine Vorlagenansicht steuert. Viele Komponenten werden in Entwicklungsanwendungen geschrieben. Dies ist unser erster Versuch, eine Komponente zu schreiben, daher haben wir darauf geachtet, sie so einfach wie möglich zu halten.

Erstellen Sie ein Unterverzeichnis mit dem Quellcode der Anwendung

Wir sind es gewohnt, unsere Programme im App-Unterverzeichnis des Projektstammverzeichnisses zu platzieren, also erstellen Sie zunächst einen App-Ordner

mkdir app
cd  app

Komponentendatei erstellen

Erstellen Sie eine app.component.ts-Datei im App-Ordner und geben Sie den folgenden Inhalt ein

import {Component} from 'angular2/core';

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

Schauen wir uns diese Datei im Detail an. In der letzten Zeile der Datei definieren wir eine Klasse.

Komponentenklasse

Auf dieser Dateiebene erstellen wir eine leere Komponentenklasse AppComponent, die nichts tut. Wenn wir die Anwendung tatsächlich entwickeln, können wir diese Klasse erweitern, indem wir beispielsweise einige Eigenschaften und Methodenlogik hinzufügen. Der Grund, warum diese AppComponent-Klasse leer ist, liegt darin, dass wir im Starterprogramm nichts damit zu tun haben.

Modul

Angular-Anwendungen sind modular. Sie enthalten viele Moduldateien, die eine bestimmte Funktion ausführen.
Die meisten Programmdateien exportieren beispielsweise eine Komponente. Unsere app.component.ts-Datei exportiert AppComponent

Klasse AppComponent { }
exportieren Exporte konvertieren eine Datei in ein Modul. Der Dateiname (ohne Erweiterung) ist normalerweise der Name des Moduls. app.component ist also der Name unseres ersten Moduls.

Einige komplexere Anwendungen verfügen über Unterkomponenten, die von AppComponent erben, und über viele Dateien und Module. Aber unser Schnellstartprogramm benötigt nicht so viele, eine Komponente reicht aus.

Wenn eine Komponente von anderen Komponenten abhängt, können wir in Typescript-Anwendungen, wenn wir andere Module einführen müssen, diese direkt importieren. Zum Beispiel:

{AppComponent} aus './app.component' importieren
Angular ist auch ein Modul, bei dem es sich um eine Sammlung von Modulen handelt. Wenn wir also einige Funktionen von Angular benötigen, führen wir auch Angular ein.

Komponentenanmerkungen

Wenn wir einer Klasse Anmerkungen hinzufügen, wird eine Klasse zu einer Angular-Komponente. Angular verwendet Annotationen, um herauszufinden, wie Ansichten erstellt werden und wie Komponenten in den Rest der Anwendung integriert werden.

Wir verwenden die Component-Methode, um Anmerkungen für eine Komponente zu definieren. Diese Methode erfordert die Einführung von angle2/core, bevor sie verwendet werden kann.

import {Component} from 'angular2/core';

In Typescript fügen wir Anmerkungen zu Klassen hinzu. Die Annotationsmethode ist sehr einfach. Verwenden Sie @ als Präfix zum Annotieren.

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素，我们会在 index.html 中用到

template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件

现在万事俱备，只差东风啦！

添加 INDEX.HTML 文件

首先回到项目的根目录，在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
   System.config({
    packages: {    
     app: {
      format: 'register',
      defaultExtension: 'js'
     }
    }
   });
   System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

 <!-- 3. Display the application -->
 <body>
  <my-app>Loading...</my-app>
 </body>

</html>

HMTL中三个部分需要说明一下：

加载我们需要的 javascript库， 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json