目的

この記事では、ルートコンポーネントが表示されるまでのプログラムの流れについて要説する。

また、雛形プロジェクトを生成した直後の状態をサンプルとし、ルートコンポーネントの表示結果となる前ページWebシステム開発 - Angular入門：雛形プロジェクトの作成 > ローカルサーバーの実行確認 > ローカルサーバーの起動確認の起動画面（template-pj app is running!.）表示を例に記載する。

※ 起動画面は、以降で示すトップページ → スタートアップコード → ルートモジュール → ルートコンポーネントの順で読み込まれる。

トップページ（index.html、styles.css）の読み込み

index.html は、アプリケーションのトップページとして最初に読み込まれ、コンポーネントの呼出しは、セレクターと呼ばれるコンポーネントのキーを要素名とすることで関連付けされる。

以下、index.htmlでは次項で示すルートコンポーネントのセレクターapp-rootをbody部で指定し関連付けしている。

また、styles.css には、土台となる汎用的な共通スタイルを追記する。
（雛形プロジェクトの生成時は、スタイルは設定されていない。）

• index.html

• style.css

スタートアップコード（main.ts）の読み込み

main.tsでは、ブラウザでアプリケーションを起動するために準備されているAngular標準の platformBrowserDynamic.bootstrapModuleメソッドを次項で示す ルートモジュール（AppModule）を引数とし、起動している。

• main.ts

ルートモジュール（app.modules.ts）の読み込み

app.modules.tsでは、モジュール構成の宣言（@NgModuleデコレーター）とモジュールクラスの定義（export class AppModule）が記述されている。

• app.module.ts

@NgModuleデコレーターで設定できる主なパラメーターは、以下の通りでdeclarationsとbootstrapに次項で示す ルートコンポーネント（AppComponent）を設定し、このルートモジュール（AppModule）をexport class AppModuleで公開し、前項のスタートアップコード（main.ts）で参照している。

• @NgModuleデコレーターの主な設定項目
  
  • declarations : モジュールに属すコンポーネント（※1）、ディレクティブ（※2）、パイプ（※3）等の設定
    　（※1）コンポーネント : 次項で示す@Componentデコレーターでラップされているクラス一式
    　（※2）ディレクティブ : ngIf、ngFor、ngStyle、ngClass等の構造/属性ディレクティブ
    　（※3）パイプ : 与えられたデータを加工整形する仕組み
  • imports : NgModuleで宣言した外部モジュールのインポート設定
  • export : NgModuleで宣言したモジュールの公開設定
  • providers : サービスクラスをimports先で使用できるようにする設定（DI：依存性注入）
  • bootstrap : ルートコンポーネントの設定
  • Id : モジュールIDの設定

ルートコンポーネント（app.componet.ts）の読み込み

ルートコンポーネントとは、最初に呼出されるメインとなるコンポーネントであり、前項までの経緯でルートモジュール（app.modules.ts）から呼出される。

@Componentデコレーター の下記パラメーターで自身のセレクター、HTML、CSSを設定し、起動画面（template-pj app is running!.）を表示している。

• @Componentデコレーターの主な設定項目
  selector : コンポーネントの参照キー。
  templateUrl : コンポーネントが読み込むHTMLのファイルパス。
  styleUrls : コンポーネントが読み込むCSSファイルパス。
  
  

  • app.component.ts
    

  • 起動画面（template-pj app is running!.）