コンポーネントの基本コードを理解する(6/6):初心者のためのAngular2入門

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

作成:2016-08-13 09:47
更新:2016-08-13 09:47

■index.htmlをチェックする

さあ、残るはルートにあるindex.htmlだけです！　ここには、けっこういろいろな仕掛けがしてあります。下のリスト欄をよく眺めましょう。

（※なお、下記掲載のリストは、生成されたコードそのままではありません。わかりやすいようにタグの並び順を入れ替えて整理してあります）

・正式リリース版の用意

{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}

environment.productionがtrueでなければ、ember-cli-live-reload.jsというファイルをロードしています。これは、environmentをカットしていたら削除しても構いません。

・スクリプトファイルのロード

{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}

これは、必要なスクリプトファイルをロードするための<script>タグを生成するものです。読み込むべきスクリプトファイルはAngular側で把握しています。

・system-config.jsとmainのロード

<script>
    System.import('system-config.js').then(function () {
        System.import('main');
    }).catch(console.error.bind(console));
</script>

SystemJSという設定ツールのファイルであるsystem-config.jsをロードし、それが完了したらmain.tsをロードしています。これにより、このアプリケーションのメインプログラムが読み込まれ実行されるわけです。

・コンポーネントの配置

<app-root>Loading...</app-root>

これが、サンプルで用意されたAppComponentというコンポーネントを配置しているカスタムタグです。AppComponentの@Componentアノテーションで、selector: 'app-root' という設定を用意してありましたね。これにより、<app-root>というタグとしてAppComponentが利用できるようになっていたのです。

――さぁ、これでようやくAngularアプリケーションの基本的な処理の流れがわかってきました。まだ、system-config.tsの設定ファイルなど、説明していないファイルはありますが、ここまでのことがわかれば、とりあえずAngularの基本的なプログラムの仕組みはわかるはずですよ。

(by. SYODA-Tuyano.)

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

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

●プログラム・リスト●

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Myapp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    {{#unless environment.production}}
    <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
    {{/unless}}

    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}
    <script>
        System.import('system-config.js').then(function () {
            System.import('main');
        }).catch(console.error.bind(console));
    </script>
</head>
<body>

    <app-root>Loading...</app-root>
    
</body>
</html>

※関連コンテンツ

<< prev next >>

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