← 解説「起動の流れ — index.htmlからAppが表示されるまで」に戻る
サンプルコードで身につける: 起動の流れ — index.htmlからAppが表示されるまで
解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。
1起動の一本道を図で確認する
index.html、main.ts、Appコンポーネントの3つが起動の登場人物です。この順番を頭に入れておくと、「アプリ全体の設定はどこか」「最初の画面はどこか」に迷わなくなります。
// アプリが表示されるまでの一本道
//
// 1. ブラウザが src/index.html を読み込む
// <body> には <app-root></app-root> があるだけ
// │
// 2. src/main.ts が実行される
// bootstrapApplication(App, appConfig)
// │
// 3. App コンポーネントが <app-root> の位置に描画される
// 画面に app.html の内容が表示される
//
// 全体設定 → app.config.ts、最初の画面 → App、と覚える
2main.ts — 起動の入口
bootstrapApplication は「このコンポーネントを、この設定で起動して」という命令です。第1引数が最初に描画するコンポーネント、第2引数がアプリ全体の設定です。生成直後から完成しており、通常は編集しません。
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
// 第1引数: 最初に描画するコンポーネント
// 第2引数: アプリ全体の設定
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));
3app.config.ts — アプリ全体の設定置き場
providers の配列に「アプリ全体で使う機能」を登録します。生成直後はルーターなどが登録済みで、後からHTTP通信の機能などを足していきます。「全体に関わる設定はここ」という置き場所だけ覚えれば今は十分です。
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
// アプリ全体で使う機能をここに登録する
provideRouter(routes), // ルーティング機能
// 後のレッスンで provideHttpClient() などを足していく
],
};
4App — 最初に描画されるコンポーネント
selector が app-root なので、index.html の <app-root> の位置にこのコンポーネントが描画されます。画面に出る内容を変えたいときは、index.html ではなくこの App のテンプレートを編集します。
// src/app/app.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root', // index.html の <app-root> に対応
template: '<h1>こんにちは、{{ title }}</h1>',
})
export class App {
title = 'my-app';
}
// ブラウザには「こんにちは、my-app」と表示される。
// 画面を変えたいときは index.html ではなくここを編集する
5実験 — app.html を書き換えて反映を見る
起動の流れを体感する一番の近道は、実際に書き換えてみることです。ng serve を起動したまま app.html を編集して保存すると、ブラウザが自動で更新されます。index.html ではなく app.html が画面の中身だと実感できます。
<!-- src/app/app.html を、生成直後の内容から丸ごと書き換えてみる -->
<h1>私の最初のAngularアプリ</h1>
<p>ここに書いた内容が画面に表示される</p>
<!-- 保存するとブラウザが自動リロードされ、すぐ反映される。
index.html を編集しても画面の中身は変わらない、という
SPAの仕組みをここで体感しておこう -->