Help us understand the problem. What is going on with this article?

angular.io FUNDAMENTALS/Bootstrapping メモ

More than 1 year has passed since last update.

https://angular.io/guide/bootstrapping

Bootstrap

アプリケーションは少なくとも1つのModuleを持っていて、 bootstrap でアプリケーションを起動する。便宜的にAppModuleと呼ぶ。

src/app/app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

bootstrap で指定したコンポーネントが index.html に描画される。

The imports array

Angularでは機能ごとのモジュールを統合してアプリケーションを作る。Angular自体も、 HttpModule RouterModule のようにモジュールに分かれている。 imports の配列にモジュールを追加してそのモジュールの機能を使う。

ほとんどのアプリケーションがブラウザで動作するので、 @angular/platform-browserBrowserModule が必要になる。

imports に入るのは NgModule のクラスだけで、他のクラスを入れてはいけない

ES2015の import とAngularのNgModuleでの imports は異なる

The declarations array

モジュールで使うコンポーネント、ディレクティブ、パイプを全て declarations に並べる。 declarations に入れていないコンポーネントを使うとエラーメッセージがブラウザに表示される。

declarations に入れるのはコンポーネント、ディレクティブ、パイプのみで他のNgModuleクラスやサービスクラスなどを入れてはいけない

The bootstrap array

AppModuleをbootstrapしてアプリケーションを起動する。 bootstrap の配列に並べたコンポーネントがDOMに挿入される。

各ブートストラップされたコンポーネントはコンポーネントのツリーのルートになる。

複数のコンポーネントを bootstrap に書くのは一般的ではなく、ほとんどの場合一つのコンポーネントを指定し、それがルートコンポーネントとなってコンポーネントのツリーとなる。

そのルートのコンポーネントをなんと読んでもいいが、大抵のデベロッパーは AppComponent と呼ぶ。

Bootstrap in main.ts

アプリケーションをブートストラップする方法はたくさんある。どれにするかは、コンパイルの方法と実行の方法による。

最初はアプリケーションを動的にコンパイルするJIT(Just-In-Time)コンパイラを使って、ブラウザ上でコンパイルする。他の方法は後述する。

JITコンパイルのアプリケーションは src/main.ts に置くのを勧める。

src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

このコードは、動的(JIT)コンパイル用のブラウザプラットフォームを作成し、上記のAppModuleをブートストラップする。

ブートストラップは実行環境を設定し、モジュールの bootstrap 配列からルートになる AppComponent を取り出し、コンポーネントのインスタンスを生成してタグを挿入する。

setup/src/index.html
<my-app><!-- content managed by Angular --></my-app>

More about Angular Modules

最初のアプリではルートのモジュール一つだけだが、アプリケーションが大きくなるとフィーチャーモジュールに切り分けて遅延ロードすることもできる。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away