コンポーネントの基本コードを理解する (5/6)
作成:2016-08-13 09:42
更新:2016-08-13 09:49
更新:2016-08-13 09:49
■main.tsをチェックする
これで「app」フォルダ内のものは一通りわかりました。が、これでもまだAngularアプリの全てを見たわけではありません。「app」の外側(プロジェクトフォルダの直下)にある、2つのファイルの働きを知る必要があります。それは、main.tsとindex.htmlです。
main.tsは、アプリケーションにアクセスされたとき最初に実行されるスクリプトです。ここには、下のリストのような処理が書かれています。
(※ちなみに、先ほどenvironmentを削除する説明をしましたが、ここでは未修正の状態のリストで説明をしておきます)
ここでは、まず3つのimport文があります。ここで、計4つのオブジェクトをインポートし使えるようにしています。
bootstrap――起動時に実行する処理を組み込むための関数オブジェクトです。
enableProdMode――正式リリース版かどうかを設定するものです。environmentのproductionがtrueなら、これを実行して正式リリース版として実行します。
AppComponent――既に説明しました。サンプルとして用意してあるコンポーネントです。
environment――先ほど説明しました。environment.tsに用意したオブジェクトですね。
これらのオブジェクトをロードし、それからenvironment.productionをチェックして正式リリース版がどうかを設定します。そして最後に、bootstrap(AppComponent);でAppComponentをブートストラップに設定します。これで、AppComponentが実行されコンポーネントとして利用可能になります。
main.tsは、アプリケーションにアクセスされたとき最初に実行されるスクリプトです。ここには、下のリストのような処理が書かれています。
(※ちなみに、先ほどenvironmentを削除する説明をしましたが、ここでは未修正の状態のリストで説明をしておきます)
ここでは、まず3つのimport文があります。ここで、計4つのオブジェクトをインポートし使えるようにしています。
bootstrap――起動時に実行する処理を組み込むための関数オブジェクトです。
enableProdMode――正式リリース版かどうかを設定するものです。environmentのproductionがtrueなら、これを実行して正式リリース版として実行します。
AppComponent――既に説明しました。サンプルとして用意してあるコンポーネントです。
environment――先ほど説明しました。environment.tsに用意したオブジェクトですね。
これらのオブジェクトをロードし、それからenvironment.productionをチェックして正式リリース版がどうかを設定します。そして最後に、bootstrap(AppComponent);でAppComponentをブートストラップに設定します。これで、AppComponentが実行されコンポーネントとして利用可能になります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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);
※関連コンテンツ