メモ帳: ARCHITARCHITECTURE OVERVIEW

Angularは、HTMLとJavaScriptまたは、JavaScriptにコンパイルされるTypeScriptを使用して、クライアントアプリを作るフレームワークである。
フレームワークは、コアとオプショナルのライブラリの集まりである。
Angularアプリを作るには、Angularのマークアップで構成されたテンプレートHTMLを作り、テンプレートをマネージするコンポーネントクラス(component classes)、サービス(services)にロジックを追加し、モジュールにコンポーネントとサービスを詰め込む。

ルートモジュールをブート(bootstrapping)しアプリを起動(launch)する。Angularは、コンテンツをブラウザに表示し、作った指示に従い、操作を処理する。

主要な八個のビルドブロックがある。

Modules

Angularアプリは、モジューラー(modular)である。AngularはAngularモジュール(modules)または、NgModulesと呼ばれるモジュールシステムを持っている。
Angularモジュール(modules)は、大物である。ここでは、紹介だけする。
詳しくは、Angularモジュールに書かれている。

小さなアプリではルートモジュールが唯一のモジュールであるが、多くのアプリはいろんな複数の機能(feature)モジュールsから成り立つ。

ルートモジュールも機能(feature)モジュールも@NgModuleデコレーターのついたクラス(class)である。

デコレーターは、JavaScript のクラスを一部変更したファンクション(function)である。Angularは、メタデータをくっつけた色々なデコレーターがある。メタデータによりクラスがどのようなものかわかるようになる。でコレーターについてはここで詳しく勉強してください。

NgModuleは一つのメタデータオブジェクトをもつデコレーターファンクションである。
メタデータオブジェクトのプロパティーsによりモジュールを記述する。
重要なプロパティーsは

declarations - このモジュール内のビュークラス(view classes). Angular には三種類のビュークラスcomponents, directives, とpipesがある
exports - declarations のうち他のモジュールsのコンポーネントテンプレートから使用できるもの
imports - このモジュールで必要になるクラスのある、他のモジュールでexportsされたモジュール.
providers - サービス(services)を作るものの宣言アプリすべてからアクセスできるサービスを提供する。
bootstrap - すべてのビューのホストとなるルートコンポーネントと呼ばれるメインのアプリビュー(the main application view), ルートモジュールだけがbootstrapプロパティをセットできる。

ルートモジュール(app/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 { }

AppComponent.のexportは、書き方の例であって、実際には必要ない。他のモジュールがルートモジュールをインポートすることがないため、ルートモジュールが、他のモジュールにexportすることはない。

ルートモジュールをブートすることによりアプリを実行する。開発中は、下記のmain.tsのように、main.tsからAppModuleをブートする。

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Angular modules と JavaScript modulesについて

ルートAngularモジュールとJavaScriptモジュールは、全く別ものでで

気をつけてくれ

JavaScriptのモジュールについて詳しくはこちらを参照

アプリを作るためには、お互いに異なり、補完する、両方のモジュールシステムを使う。

Angular libraries

Angularは、JavaScriptモジュールの集まりとして出荷されます。JavaScriptモジュールをライブラリーモジュールとみることができる。

Angularライブラリーの名前はプレフィクス@angularで始まる。

Angularライブラリーのインストールは、npmパッケージマネージャーで行い、個々のパートのインポートは、JavaScriptのimportステートメントで行う

たとえば、AngularのComponentデコレーターを@angular/coreライブラリーからインポートするには次のように書く。

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

JavaScriptのimportステートメントを使いAngularライブラリーsからAngularモジュールsをインポートする。

import { BrowserModule } from '@angular/platform-browser';

ルートモジュール(app/app.module.ts)の例で示したように、アプリのモジュールは、BrowserModuleの部品が必要になる。部品にアクセスするには、下記のように@NgModuleのmetadataにインポートする。

imports: [ BrowserModule ],

これがAngularとJavaScriptのそれぞれのモジュールシステムを一緒に使う方法である。

どちらもimport,exportという同じ言葉を使うために混乱しやすい。がんばってくれ。時間と経験が混乱を解決してくれる。

Angular modules 詳しくはここ

Components

コンポーネントは、ビューとよばれる画面の一単位をコントロールする。 例えば下記のチュートリアルで作ったビューは、コンポーネントsによりコントロールされる。

The app root with the navigation links.
The list of heroes.
The hero editor.

クラス内にコンポーネントのアプリのロジック(ビューをサポートする)を記述する。クラスは、フロパティーsとメソッドsのAPIを通じてビューと連携する。

下記のように HeroListComponentはサビースから取得したheroesの配列を返すheroes プロパティーを持っている。 HeroListComponent はまたユーザーがヒーローのリストをクリックした時に、selectedHeroプロパティーをセットするselectHero() メソッドを持っている。

app/hero-list.component.ts (class)

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Angularは、ユーザーがアプリを移動した時にコンポーネントの作成、更新、廃棄(creates,updates,destroys)を行う。ngOnInit()のような宣言で、ライフサイクルフックを追加することにより、 create,update,destroyのタイミングに処理を組み込むことができる。

Templates

コンポーネントのビューは、コンポーネントのテンプレイトにより定義される。テンプレートはHTML形式である。テンプレートは Angular がコンポーネントを表示する方法をしめす。テンプレートはいくつかの例外はあるがl通常のHTMLのように見える。 Here is a template for our HeroListComponent:

app/hero-list.component.html

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

テンプレートは、 <h2> and <p> のような通常のHTMLエレメントをつかっているが, *ngFor, {{hero.name}}, (click), [hero], <hero-detail> のように Angularのテンプレート構文も使っている. テンプレートの最後の行の <hero-detail> タグは、新しいコンポーネント(HeroDetailComponent) のためのカスタムエレメントである。

The HeroDetailComponentは、今見てるthe HeroListComponentとは違うコンポーネントである。HeroDetailComponent (コードは示されていない)は、HeroListComponent で表示されるリストから選択した特定のヒーローを表示する。HeroDetailComponent is はHeroListComponentの子供になる。

<hero-detail> が生のHTMLエレメントのなかに　上手く埋め込まれていることに注意してください。カスタムコンポーネントは、生のHTMLに継ぎ目なく埋め込まれます。

Metadata

メタデータは、Angularにクラスの処理方法を伝える。
HeroListComponent自体は、クラスであり、フレームワークやAngular独自のものではない。Angularにコンポーネントであることを伝えない限り、HeroListComponentは、ただのクラスである。
メタデータを取り付ける事によりHeroListComponentがコンポーネントであることをAngularに伝える。
TypeScriptでは、デコレーターを使いメタデータを取り付ける。

app/hero-list.component.ts(metadata)

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

@Componentデコレーターが直下のクラスがコンポーネントクラスであることを示している。

ここまで訳してみたが　ここで力尽きた

メモ帳

2017年1月18日水曜日

ARCHITARCHITECTURE OVERVIEW