概要

Angularアプリでルートコンポーネントが表示されるまでの読み込み順を、雛形プロジェクトのファイルを例に整理する。

Angularでは、index.htmlから始まり、main.ts、AppModule、AppComponentへと処理がつながる。この流れを理解すると、画面がどこから起動しているのかを追いやすくなる。

ここでは、トップページ、スタートアップコード、ルートモジュール、ルートコンポーネントの関係を確認する。

この記事で扱うこと

• index.html、main.ts、AppModule、AppComponentの関係。
• app-rootセレクターが画面表示につながる理由。
• @NgModuleと@Componentの基本的な役割。
• Angularアプリの起動順序。

作業前に確認すること

注意したい点

トップページ（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.component.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!.）
    

実務とのつながり

• 初期表示の調査
  画面が出ないときに、起動順のどこで止まっているかを確認しやすくなる。
• コンポーネント追加
  ルートコンポーネントの役割を理解すると、後続の画面部品追加に進みやすい。
• 設定変更
  bootstrapやselectorの意味を理解していると、設定変更時の影響を読みやすい。

まとめ

• Angularアプリはindex.htmlから始まり、main.tsでAppModuleを起動する。
• AppModuleのbootstrap設定によりAppComponentが起動する。
• AppComponentのselectorとindex.htmlのapp-rootが対応し、初期画面が表示される。