Detaillierte Erläuterung der Architekturnutzung von Angular 4.0

Dieses Mal werde ich Ihnen die Verwendung der Angular 4.0-Architektur ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Angular 4.0-Architektur?

Vorwort

Vor einiger Zeit hat Google Version 4.0 des beliebten AngularJavaScript-Frameworks veröffentlicht. Diese Version zielt darauf ab, die Größe des generierten Codes zu reduzieren und einen vereinfachten Release-Plan für das Framework beizubehalten.

Es ist lange her, dass ich so etwas konzeptionelleres geschrieben habe, aber ich habe das Gefühl, dass die Lerneffizienz ohne die Bildung einer Wissensstruktur erheblich verringert wird. Hier werde ich das Wissen, das ich verstehe, mit Ihnen teilen und einige Inhalte aus offiziellen Dokumenten zitieren. Geben Sie unten das Thema ein

Übersicht über die Winkelarchitektur

Dieses Architekturdiagramm zeigt die 8 Hauptbausteine ​​in einer Angular-Anwendung:

• Modul

• Komponente

• Vorlage (Vorlage)

• Metadaten

• Datenbindung (Datenbindung)

• Richtlinie (Richtlinie)

• Service (Dienstleistung)

• Abhängigkeitsinjektion (Abhängigkeitsinjektion)

Als nächstes werde ich es der Reihe nach und mit Bildern erklären.

1. Modul

Neue von Angular oder ionic erstellte Projekte verfügen über ein Root-Modul und der Standardname ist AppModule. Wenn Sie Modular zum Erstellen einer Anwendung verwenden, schließen Sie Folgendes ein AppModule, jedes hat eine @NgModule-Dekoratorklasse (obwohl es Java sehr ähnlich ist). Anmerkung in , aber sein offizieller Name ist decorator). Wenn unsere neue Seite kein verzögertes Laden verwendet, muss sie vor der Verwendung in @NgModule deklariert werden.

Hier ist ein Beispiel, um den Inhalt in @NgModule kurz vorzustellen

//app.module.ts
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 { }

• importiert andere Module, in denen sich die Klassen befinden, die für die in diesem Modul deklarierte Komponentenvorlage erforderlich sind.

• Anbieter Der Ersteller des Dienstes und zur globalen Dienstliste hinzugefügt, die in jedem Teil der Anwendung verwendet werden kann.

• declarations deklariert die Ansichtsklassen, die diesem Modul gehören. Angular verfügt über drei Ansichtsklassen: Komponenten, Direktiven und Pipes.

• Eine Teilmenge von Exportdeklarationen, die in Komponentenvorlagen anderer Module verwendet werden können.

• bootstrap gibt die Hauptansicht der Anwendung (die sogenannte Root-Komponente) an, die der Host für alle anderen Ansichten ist. Nur das Root-Modul kann das Bootstrap-Attribut festlegen.

Die Bedeutung in der Abbildung: Schauen Sie sich die obere linke Ecke der Abbildung an. Das Modul wird zum Empfangen eines Metadatenobjekts verwendet, das die Modulattribute beschreibt.

2. Komponente, Vorlage, Metadaten

Dieses Mal werden wir gemeinsam über diese drei Punkte sprechen. Schauen wir uns zuerst diesen Code an

//hero-list.component.ts
@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Komponente

Eine Komponente ist ein Dekorator, der ein Konfigurationsobjekt akzeptiert, und Angular erstellt und zeigt die Komponente und ihre Ansichten basierend auf diesen Informationen an.

• Selektor: Ein CSS-Selektor, der Angular anweist, im übergeordneten HTML-Code nach dem -Tag zu suchen, die Komponente zu erstellen und einzufügen.

• templateUrl: Die modulrelative Adresse der Komponenten-HTML-Vorlage. Wenn Sie zum Schreiben eine Vorlage verwenden, verwenden Sie das Symbol „`“, um HTML-Code direkt zu schreiben.

• Anbieter: Abhängigkeitsinjektion von Diensten, die von der Komponente benötigt werden.

Vorlage

Eine Vorlage ist ein Teil des HTML-Codes, den Sie mit „templateUrl“ von außen einführen oder mit „template“ direkt schreiben können.

Metadaten

Metadaten-Dekoratoren steuern das Verhalten von Angular auf ähnliche Weise. Beispielsweise gehören @Input, @Output, @Injectable usw. zu den am häufigsten verwendeten Dekoratoren, und ihre Verwendung wird hier nicht näher erläutert.

Was es im Diagramm bedeutet: Schauen Sie sich die Mitte des Diagramms an. Vorlagen, Metadaten und Komponenten beschreiben zusammen die Ansicht.

3. Datenbindung

Hier werden insgesamt vier Datenbindungen angezeigt. Schauen Sie sich den Beispielcode an:

//插值表达式 显示组件的hero.name属性的值
<li>{{hero.name}}</li>
//属性绑定 把父组件selectedHero的值传到子组件的hero属性中
<hero-detail [hero]="selectedHero"></hero-detail>
//事件绑定 用户点击英雄的名字时调用组件的selectHero方法
<li (click)="selectHero(hero)"></li>
//双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值
<input [(ngModel)]="hero.name">

可能大家对各种括号看的眼花了，总结一下：

• 双花括号是单向绑定，传递的是值。方向是 组件 -> 模板。

• 方括号是单向绑定，传递的是属性。方向是 父组件 -> 子组件。

• 圆括号是事件绑定，处理点击等活动（action）。

• 方括号套圆括号是双向绑定，方向是 组件 <-> 模板。

在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。

4.指令 (directive)

严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。

我们这里提到的指令有两种类型：

结构型 structural 指令和属性 attribute 型指令。

放一下原文证明一下组件确实算是一个指令：

While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.

Two other kinds of directives exist: structural and attribute directives.

结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。

属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。之后我会单独写一篇讲他们用法的文章。

在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。

5.服务 (service)

官方文档的概念：

服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。

这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。

在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。

6.依赖注入 (dependency injection)

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入 HomeService 这个服务，看这段代码：

constructor(private service: HeroService) { 
 ...
}

这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider。

看一下下面的代码，意思就是我们必须在 providers 写上才能用

@Component({
 selector: 'hero-list',
 templateUrl: './hero-list.component.html',
 providers: [ HeroService ]
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS的递归实现方法

JS+canvas绘制饼状统计图

优化页面加载速度插件InstantClick

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Architekturnutzung von Angular 4.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!