フレームワークは、コアとオプショナルのライブラリの集まりである。
Angularアプリを作るには、Angularのマークアップで構成されたテンプレートHTMLを作り、テンプレートをマネージするコンポーネントクラス(component classes)、サービス(services)にロジックを追加し、モジュールにコンポーネントとサービスを詰め込む。
ルートモジュールをブート(bootstrapping)しアプリを起動(launch)する。Angularは、コンテンツをブラウザに表示し、作った指示に従い、操作を処理する。
主要な八個のビルドブロックがある。
Modules
Angularモジュール(modules)は、大物である。ここでは、紹介だけする。
詳しくは、Angularモジュールに書かれている。
小さなアプリではルートモジュールが唯一のモジュールであるが、多くのアプリはいろんな複数の機能(feature)モジュールsから成り立つ。
ルートモジュールも機能(feature)モジュールも@NgModuleデコレーターのついたクラス(class)である。
デコレーターは、JavaScript のクラスを一部変更したファンクション(function)である。Angularは、メタデータをくっつけた色々なデコレーターがある。メタデータによりクラスがどのようなものかわかるようになる。でコレーターについてはここで詳しく勉強してください。
メタデータオブジェクトのプロパティーsによりモジュールを記述する。
重要なプロパティーsは
exports- declarations のうち他のモジュールsのコンポーネントテンプレートから使用できるものimports- このモジュールで必要になるクラスのある、他のモジュールでexportsされたモジュール.providers- サービス(services)を作るものの宣言 アプリすべてからアクセスできるサービスを提供する。bootstrap- すべてのビューのホストとなるルートコンポーネントと呼ばれるメインのアプリビュー(the main application view), ルートモジュールだけがbootstrapプロパティをセットできる。
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モジュールは、全く別ものでで
気をつけてくれ
アプリを作るためには、お互いに異なり、補完する、両方のモジュールシステムを使う。
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を通じてビューと連携する。
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; }
}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>
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 {
/* . . . */
}
