~Linux、MySQLからAJAXまでAngular2のモジュール、コンポーネント、bootstrapの概要Angular2の基本構成の中心であるモジュール、コンポーネントについての概要とbootstrap関数によるアプリの起動について確認しました。※Angularの4.4.3版、TypeScriptを使って確認したものです。※目次をクリックすると目次の下部にコンテンツが表示されます。簡単なサンプルコード以下の簡単なサンプルコードを例に説明します。・コンポーネントは、Angular1のディレクティブに類似している。・Webコンポーネントの機能によって作られている。・コンポーネントは、ビューとロジックを持つ。・サービスを依存性注入によって連携できる。・コンポーネントは、プロパティパインディングを使用して値の更新をチェックする。・コンポーネントはイベントを処理でき、イベントハンドラーは、コンポーネントのクラス内で定義されたパブリックメソッド。・Angularアプリは、モジュール構成で、目的に応じて分けられた複数のファイルで構成。上記サンプルではtitle.component.ts・多くのファイルはコンポーネントとしてexportしている。exportすることにより、他のモジュールからこのコンポーネントを利用できる。・他のコンポーネントを使用する場合は、importする。‘./title.component.ts’;title.component.tsという名前のファイルをインポートし、”TitleComponent”というシンボルで参照する。3)コンポーネントのメタデータ・メタデータを指定する事によってクラスがAngularコンポーネントになる。Modules';}・Angularは、ビューの組み立てやコンポーネントがアプリの他のパーツとどのように関連するのかを知るためにメタデータを必要とする。・コンポーネントのメタデータは、Angularの”Component”関数を使って定義する。・”Component”関数は、Angularのcoreモジュールをインポートしてアクセスする。・TypeScriptでは、@シンボルでプレフィックスし、コンポーネントクラスの真上に記述する事によって、この関数をクラスへのデコレータとして適用する。・@Componentの記述によって、AngularはこのクラスがAngularコンポーネントであることを認識し、引数で指定した”selector”と”template”はconfigurationオブジェクトとなる。“selector”はCSSセレクターの名前を示し、”template”はコンポーネントのビューとなる。・上記サンプルでは、ビュー内でselector属性で指定した”my-app”の記述を見つけると、Angularは”AppComponent”クラスのインスタンスを生成して、テンプレートを表示する。・モジュールのリストを指定。・BrowserModuleは、すべてのブラウザーアプリがインポートしなければならないモジュール。・このモジュール内で定義したカスタムのディレクティブとパイプのリストを指定。・Angular2がアプリを開始するとき、AppComponentのtemplateで定義したHTMLをindex.htmlの<my-app>要素タグ内に配置する。‘./app.module.ts’;platformBrowserDynamic().bootstrapModule(AppModule);・ブラウザ内にアプリをコンパイルし、アプリを開始する。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。