Angular 4.0のアーキテクチャ使用法の詳細な説明

今回は、Angular 4.0 アーキテクチャの使用について詳しく説明します。Angular 4.0 アーキテクチャを使用する際の 注意事項 について、実際のケースを見てみましょう。

はじめに

JavaScript フレームワークのバージョン 4.0 をリリースしました。これは、生成されるコードのサイズを削減し、フレームワークの簡素化されたリリース計画を維持することに特化しています。

Angular アーキテクチャの概要

このアーキテクチャ図は、Angular アプリケーションの 8 つの主要な構成要素を示しています:

• モジュール

コンポーネント
テンプレート
メタデータ
• データバインディング (データバインディング)

ディレクティブ (指示)
Service (サービス)
• 依存性注入 (依存性注入)

次に写真付きで順番に説明していきます。

1. モジュール

Modular を使用してアプリケーションを作成する場合は、次の内容を含めます AppModule には、それぞれ @NgModule デコレータ クラスがあります (ただし、これは Java に非常に似ています) のアノテーションですが、正式名称はデコレータです）。新しいページが遅延読み込みを使用しない場合は、使用する前に @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 { }

• の内容を簡単に紹介する例です。 このモジュールで宣言されたコンポーネント テンプレートで必要なクラスが配置されている他のモジュールをインポートします。

プロバイダー サービスの作成者であり、アプリケーションのどの部分でも使用できるグローバル サービス リストに追加されます。
declarations は、このモジュールが所有するビュー クラスを宣言します。 Angular には、コンポーネント、ディレクティブ、パイプという 3 つのビュー クラスがあります。
他のモジュールのコンポーネントテンプレートで使用できるエクスポート宣言のサブセット。
bootstrap は、他のすべてのビューのホストであるアプリケーションのメイン ビュー (ルート コンポーネントと呼ばれる) を指定します。ルート モジュールのみがブートストラップ属性を設定できます。

2. コンポーネント、テンプレート、メタデータ

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

コンポーネント

• selector: 親 HTML で タグを検索し、コンポーネントを作成して挿入するように Angular に指示する CSS セレクター。

templateUrl: コンポーネントの HTML テンプレートのモジュール相対アドレス。テンプレートを使用して記述する場合は、「`」記号を使用して HTML コードを直接記述します。
プロバイダー: コンポーネントに必要なサービスの依存関係注入。

テンプレート

メタデータ

3.データバインディング

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

以上がAngular 4.0のアーキテクチャ使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。