Angular 2 Architektur

Angular 2-Anwendungen bestehen hauptsächlich aus den folgenden 8 Teilen:

1. Module
2. Komponenten
3. Templates
4. Metadaten
5. Datenbindung
6. Direktiven
7. Dienste
8. Dependency Injection

Das folgende Diagramm zeigt, wie die einzelnen Teile zusammenarbeiten:

Im Diagramm bestehen Templates aus von Angular erweiterter HTML-Syntax; Komponentenklassen verwalten diese Templates; die Anwendungslogik wird über Dienste abgewickelt; dann werden Dienste und Komponenten in Module verpackt; schließlich wird die Anwendung durch Bootstrapping des Stammmoduls gestartet.

Als Nächstes analysieren wir die oben genannten 8 Teile einzeln:

Module

Ein Modul besteht aus einem Codeblock, der zur Ausführung einer einfachen Aufgabe verwendet werden kann.

Angular-Anwendungen sind modular aufgebaut und verfügen über ein eigenes Modulsystem: NgModules.

Jede Angular-Anwendung sollte mindestens ein Modul (das Stammmodul) haben, das im Allgemeinen benannt werden kann als: AppModule.

Ein Angular-Modul ist eine Klasse mit einem @NgModule-Dekorator, die ein Metadatenobjekt empfängt, das die Eigenschaften des Moduls beschreibt.

Mehrere wichtige Eigenschaften sind wie folgt:

declarations- Ansichtsklassen gehören zu diesem Modul. Angular hat drei Arten von Ansichtsklassen: Komponenten, Direktiven und Pipes.
exports- Eine Teilmenge von Deklarationen, die in Komponententemplates anderer Module verwendet werden kann.
imports- Module, deren exportierte Klassen im Komponententemplate dieses Moduls benötigt werden.
providers- Ersteller von Diensten. Dieses Modul fügt sie der globalen Dienstetabelle hinzu, sodass sie von jedem Teil der Anwendung aus zugänglich sind.
bootstrap- Die Hauptansicht der Anwendung, Root-Komponente genannt, die der Host aller anderen Anwendungsansichten ist. Nur das Stammmodul muss die bootstrap-Eigenschaft festlegen.

Das einfachste Stammmodul:

app/app.module.ts-Datei:

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

Als Nächstes starten wir die Anwendung, indem wir das Stammmodul booten. Im Entwicklungsprozess wird AppModule normalerweise in der main.ts-Datei gebootet, wie folgt:

app/main.ts-Datei:

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

Komponenten

Eine Komponente ist eine Steuerklasse für ein Template, die zur Handhabung des Ansichtsteils der Anwendung und der Seitenlogik verwendet wird.

Komponenten sind das Fundament und der Kern von Angular-Anwendungen und können in der gesamten Anwendung verwendet werden.

Eine Komponente weiß, wie sie sich selbst rendert und die Dependency Injection konfiguriert.

Komponenten interagieren mit der Ansicht über eine API, die aus Eigenschaften und Methoden besteht.

Es gibt drei Schritte zum Erstellen einer Angular-Komponente:

Importieren Sie den Component-Dekorator aus @angular/core
Erstellen Sie eine normale Klasse und dekorieren Sie sie mit @Component
Llegen Sie in @Component den selectorcustom tagund das templateTemplate fest

Templates

Die Standardsprache von Angular-Templates ist HTML.

Wir können Angular mitteilen, wie eine Komponente angezeigt werden soll, indem wir Templates verwenden, um die Ansicht der Komponente zu definieren. Hier ist ein einfaches Beispiel:

<div>
网站地址 : {{site}}
</div>

In Angular werden standardmäßig doppelte geschweifte Klammern als Interpolationssyntax verwendet, und der Wert zwischen den geschweiften Klammern ist normalerweise ein Variablennamen einer Komponenteneigenschaft.

Metadaten

Metadaten teilen Angular mit, wie eine Klasse zu handhaben ist.

Betrachten Sie die folgende Situation: Wir haben eine Komponente namens Component, die eine Klasse ist, bis wir Angular mitteilen, dass dies eine Komponente ist.

Sie können dieser Klasse Metadaten anhängen, um Angular mitzuteilen, dass Component eine Komponente ist.

In TypeScript verwenden wir Dekoratoren, um Metadaten anzuhängen.

Beispiel

@Component({
   selector : 'mylist',
   template : '<h2>Example</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

Der @Component-Decorator kann ein Konfigurationsobjekt entgegennehmen und markiert die ihm folgende Klasse als Komponentenklasse.

Angular erstellt und zeigt die Komponente sowie deren Ansicht basierend auf diesen Informationen an.

Konfigurationselemente in @Component:

selector- Ein CSS-Selektor, der Angular anweist, ein <mylist>-Tag im übergeordneten HTML zu finden, dann die Komponente zu erstellen und sie in dieses Tag einzufügen.
templateUrl- Die Adresse der HTML-Vorlage der Komponente.
directives- Ein Array, das die Komponenten oder Direktiven enthält, von denen diese Vorlage abhängt.
providers- Ein Array, das die Dependency-Injection-Provider für die Services enthält, von denen die Komponente abhängt.

Data binding

Datenbindung bietet Anwendungen eine einfache und konsistente Möglichkeit, Daten anzuzeigen und mit ihnen zu interagieren. Sie ist ein Mechanismus zur Verwaltung von Werten innerhalb einer Anwendung.

Durch diesen Mechanismus können Werte aus HTML abgerufen und zugewiesen werden, wodurch das Lesen, Schreiben und die dauerhafte Speicherung von Daten einfacher und schneller werden.

Wie in der Abbildung gezeigt, gibt es vier Formen der Datenbindungssyntax. Jede Form hat eine Richtung – vom DOM, zum DOM, bidirektional –, genau wie die Pfeile in der Abbildung anzeigen.

Interpolation: Komponentenwerte in HTML-Tags anzeigen.
```
<h3>
{{title}}
<img src="{{ImageUrl}}.html">
</h3>
```
Property binding: Setzt die Eigenschaft eines Elements auf den Wert einer Komponenteneigenschaft.
```
<img [src]="userImageUrl">
```
Event binding: Wird ausgelöst, wenn auf einen Komponentenmethodennamen geklickt wird.
```
<button (click)="onSave()">保存</button>
```
Two-way binding: Die Verwendung der NgModel-Direktive in Angular kann die bidirektionale Bindung erleichtern.
```
<input [value]="currentUser.firstName"
       (input)="currentUser.firstName=$event.target.value" >
```

Direktiven

Angular-Vorlagen sind dynamisch. Wenn Angular sie rendert, modifiziert es das DOM gemäß den Direktiven.

Eine Direktive ist eine Klasse mit „Direktiven-Metadaten“. In TypeScript werden Metadaten über den @Directive-Decorator an die Klasse angehängt.

Angular enthält die folgenden drei Arten von Direktiven:

Attribut-Direktiven: Direktiven, die in Form von Elementattributen verwendet werden.
Struktur-Direktiven: Werden verwendet, um die Struktur des DOM-Baums zu verändern.
Komponenten: Als wichtige Unterklasse von Direktiven können Komponenten im Wesentlichen als Direktiven mit Vorlagen betrachtet werden.

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

*ngFor weist Angular an, für jedes Element in der Sites-Liste ein <li>-Tag zu generieren.

*ngIf bedeutet, dass die SiteDetail-Komponente nur dann eingeschlossen wird, wenn das ausgewählte Element existiert.

Dienste

Ein Service in Angular2 ist ein unabhängiges Modul, das eine bestimmte Funktion kapselt und von anderen durch Injektion verwendet werden kann.

Services gibt es in vielen Arten, einschließlich: Werte, Funktionen und von der Anwendung benötigte Features.

Wenn beispielsweise doppelter Code in mehreren Komponenten auftritt, extrahieren Sie den doppelten Code in einen Service, um eine Code-Wiederverwendung zu erreichen.

Hier sind einige gängige Services:

Protokollierungs-Service
Datendienst
Nachrichtenbus
Steuerrechner
Anwendungskonfiguration

Das folgende Beispiel ist ein Protokollierungs-Service, der verwendet wird, um Protokolle in der Browser-Konsole aufzuzeichnen:

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Dependency Injection

Inversion of Control (IoC) ist ein Designprinzip in der objektorientierten Programmierung, das verwendet werden kann, um die Kopplung zwischen ComputerCode zu reduzieren. Der gängigste Weg wird als Dependency Injection (DI) bezeichnet, und ein anderer Weg wird als „Dependency Lookup“ bezeichnet.

Durch die Umkehrung der Steuerung übergibt eine externe Entität, die alle Objekte im System regelt, beim Erstellen eines Objekts Referenzen auf die Objekte, von denen es abhängt. Mit anderen Worten, Abhängigkeiten werden in das Objekt injiziert.

In traditionellen Entwicklungsmustern ist der Aufrufer für die Verwaltung der Abhängigkeiten aller Objekte verantwortlich, und zirkuläre Abhängigkeiten waren schon immer ein Albtraum. Im Dependency-Injection-Muster wird diese Verwaltungsaufgabe jedoch an den Injektor übergeben, der dafür verantwortlich ist, abhängige Objekte zur Laufzeit der Software anstelle der Kompilierzeit zu ersetzen. Diese Umkehrung der Steuerung und Laufzeitinjektion ist das Wesen der Dependency Injection.

Angular kann bestimmen, welche Services eine Komponente benötigt, indem es die Parametertypen ihres Konstruktors überprüft. Zum Beispiel erfordert der Konstruktor der SiteListComponent-Komponente einen SiteService:

constructor(private service: SiteService) { }

Wenn Angular eine Komponente erstellt, findet es zuerst einen Injektor für die von der Komponente benötigten Services.

Ein Injektor ist ein Container, der Service-Instanzen verwaltet und zuvor erstellte Instanzen speichert.

Wenn der Container die angeforderte Service-Instanz noch nicht hat, erstellt der Injektor eine Service-Instanz, fügt sie dem Container hinzu und gibt den Service dann an Angular zurück.

Wenn alle Services aufgelöst und zurückgegeben wurden, ruft Angular den Konstruktor der Komponente mit diesen Services als Argumenten auf. Dies ist Dependency Injection.

Weitere Erweiterungen