libro
www.tuyano.com
初心者のためのAngular2入門

コンポーネントの基本コードを理解する (5/6)

作成:2016-08-13 09:42
更新:2016-08-13 09:49

■main.tsをチェックする

これで「app」フォルダ内のものは一通りわかりました。が、これでもまだAngularアプリの全てを見たわけではありません。「app」の外側(プロジェクトフォルダの直下)にある、2つのファイルの働きを知る必要があります。それは、main.tsindex.htmlです。

main.tsは、アプリケーションにアクセスされたとき最初に実行されるスクリプトです。ここには、下のリストのような処理が書かれています。

(※ちなみに、先ほどenvironmentを削除する説明をしましたが、ここでは未修正の状態のリストで説明をしておきます)

ここでは、まず3つのimport文があります。ここで、計4つのオブジェクトをインポートし使えるようにしています。

bootstrap――起動時に実行する処理を組み込むための関数オブジェクトです。
enableProdMode――正式リリース版かどうかを設定するものです。environmentproductionがtrueなら、これを実行して正式リリース版として実行します。
AppComponent――既に説明しました。サンプルとして用意してあるコンポーネントです。
environment――先ほど説明しました。environment.tsに用意したオブジェクトですね。

これらのオブジェクトをロードし、それからenvironment.productionをチェックして正式リリース版がどうかを設定します。そして最後に、bootstrap(AppComponent);AppComponentをブートストラップに設定します。これで、AppComponentが実行されコンポーネントとして利用可能になります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppComponent);
※関連コンテンツ

「初心者のためのAngular2入門」に戻る