ホームページ > 記事 > ウェブフロントエンド > Angular 4.0のアーキテクチャ使用法の詳細な説明

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

php中世界最好的语言オリジナル: 2018-04-18 09:35:451372ブラウズ

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

はじめに

少し前に、Google は人気の Angular

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

久しぶりにこのような概念的なことを書きましたが、知識構造を形成しないと学習効率が大幅に下がってしまう気がします。ここでは私が理解している知識を共有しますが、内容の一部は公式文書から引用しています。以下のトピックを入力してください

Angular アーキテクチャの概要

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

モジュール
データバインディング (データバインディング)
依存性注入 (依存性注入)

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

1. モジュール

Angular または ionic によって作成された新しいプロジェクトにはルートモジュールがあり、デフォルト名は AppModule です。

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

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

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

図の意味: 図の左上隅を見てください。モジュールは、モジュールの属性を説明するメタデータオブジェクトを受け取るために使用されます。

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

今回はこの3点についてまとめてお話していきます

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

まずはこのコードを見てみましょう。

コンポーネント

コンポーネントは構成オブジェクトを受け入れるデコレータであり、Angular はこの情報に基づいてコンポーネントとそのビューを作成して表示します。

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

テンプレート

テンプレートは HTML コードの一部であり、templateUrl を使用して外部から導入することも、template`` を使用して直接記述することもできます。

メタデータ

メタデータデコレータは、同様の方法で Angular の動作をガイドします。たとえば、@Input、@Output、@Injectable などは最も一般的に使用されるデコレータの一部であり、ここではその使用法を拡張しません。

図の意味: 図の中央に注目してください。テンプレート、メタデータ、コンポーネントが一緒になってビューを説明しています。

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

合計 4 つのデータバインディングがここに示されています。サンプルコードを見てください。

//插值表达式 显示组件的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中文网其它相关文章！

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

関連記事