Angular 2-アーキテクチャ

次のスクリーンショットは、Angular 2アプリケーションの構造を示しています。各アプリケーションはコンポーネントで構成されています。各コンポーネントは、アプリケーションの機能の論理的な境界です。コンポーネント間で機能を共有するために使用される階層化サービスが必要です。

解剖学

以下はコンポーネントの構造です。コンポーネントはで構成されています-

クラス-これは、プロパティとメソッドで構成されるC ++またはJavaクラスのようなものです。
*メタデータ-これは、クラスを装飾し、クラスの機能を拡張するために使用されます。
テンプレート-これは、アプリケーションに表示されるHTMLビューを定義するために使用されます。

コンポーネント

以下はコンポーネントの例です。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

各アプリケーションはモジュールで構成されています。各Angular 2アプリケーションには、1つのAngular Root Moduleが必要です。各Angular Rootモジュールは、機能を分離するために複数のコンポーネントを持つことができます。

機能

以下はルートモジュールの例です。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

各アプリケーションは機能モジュールで構成され、各モジュールにはアプリケーションの個別の機能があります。各Angular機能モジュールには、機能を分離するための複数のコンポーネントを含めることができます。

各アプリケーション

Angular2-architecture

Angular 2-アーキテクチャ