Explication détaillée de l'utilisation de l'architecture d'Angular 4.0

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'architecture Angular 4.0 Quelles sont les précautions lors de l'utilisation de l'architecture Angular 4.0 Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

Il y a quelque temps, Google a publié la version 4.0 du populaire framework AngularJavaScript. Cette version s'engage à réduire la taille du code généré et à maintenir un plan de publication simplifié pour le framework.

Cela fait longtemps que je n'ai pas écrit quelque chose de plus conceptuel comme celui-ci, mais je pense que sans former une structure de connaissances, l'efficacité de l'apprentissage sera considérablement réduite. Ici, je partagerai avec vous les connaissances que je comprends, et une partie du contenu est citée à partir de documents officiels. Entrez le sujet ci-dessous

Aperçu de l'architecture angulaire

Ce schéma d'architecture montre les 8 principaux éléments constitutifs d'une application Angular :

• Module

• Composant

• Modèle (modèle)

• métadonnées

• Liaison de données (liaison de données)

• Directive (directive)

• Service (service)

• Injection de dépendances (injection de dépendances)

Ensuite, je vais l'expliquer dans l'ordre et avec des photos.

1.Module

Les nouveaux projets créés par Angular ou ionic auront un module racine et le nom par défaut est AppModule. Si vous utilisez Modulaire pour créer une application, incluez AppModule, chacun aura une classe de décorateur @NgModule (bien qu'elle soit très similaire à Java annotation dans , mais son nom officiel est décorateur). Si notre nouvelle page n'utilise pas le chargement différé, elle doit être déclarée dans @NgModule avant utilisation.

Voici un exemple pour présenter brièvement le contenu de @NgModule

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

• importe d'autres modules où se trouvent les classes requises par le modèle de composant déclaré dans ce module.

• fournisseurs Créateur du service et ajouté à la liste globale des services, qui peut être utilisé dans n'importe quelle partie de l'application.

• declarations déclare les classes de vue appartenant à ce module. Angular a trois classes de vues : composants, directives et tuyaux.

• Un sous-ensemble de déclarations d'exportations qui peuvent être utilisées dans les modèles de composants d'autres modules.

• bootstrap spécifie la vue principale de l'application (appelée composant racine), qui est l'hôte de toutes les autres vues. Seul le module racine peut définir l'attribut bootstrap.

La signification dans la figure : Regardez dans le coin supérieur gauche de la figure, le module est utilisé pour recevoir un objet de métadonnées qui décrit les attributs du module.

2. Composant, modèle, métadonnées

Cette fois, nous parlerons ensemble de ces trois points. Voyons d’abord ce code

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

Composant

Un composant est un décorateur qui accepte un objet de configuration, et Angular crée et affiche le composant et ses vues en fonction de ces informations.

• selector : un sélecteur CSS qui indique à Angular de rechercher la balise dans le code HTML parent, de créer et d'insérer le composant.

• templateUrl : L'adresse relative du module du modèle HTML du composant. Si vous utilisez un modèle pour écrire, utilisez le symbole "`" pour écrire directement du code HTML.

• fournisseurs : Injection de dépendances des services requis par le composant.

modèle

Un modèle est ce morceau de code HTML. Vous pouvez utiliser templateUrl pour l'introduire de l'extérieur, ou vous pouvez utiliser template`` pour l'écrire directement.

métadonnées

Les décorateurs de métadonnées guident le comportement d'Angular de la même manière. Par exemple, @Input, @Output, @Injectable, etc. font partie des décorateurs les plus couramment utilisés, et leur utilisation ne sera pas développée ici.

Ce que cela signifie dans le diagramme : regardez au milieu du diagramme. Les modèles, les métadonnées et les composants décrivent ensemble la vue.

3. Liaison de données

Un total de quatre liaisons de données sont affichées ici. Jetez un œil à l'exemple de code :

//插值表达式 显示组件的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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!