Angular2 開発環境構築

Angular-cliにng2-bootstrapを導入する

投稿日:2017年3月13日 更新日:

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。angular-cliの開発環境でのng2-bootsrapを導入方法を説明します。

 

 

1.Angular-cliの導入

最初にangular-cliを導入します。angular-cliが未導入の場合は以下を参考にして下さい。
Angular2の開発環境を構築(angular-cli)

 

2.Angular2のプロジェクト作成

作業ディレクトリ(当サイトでは「C:\ng2test」)に、サンプルプロジェクトを「sample2」を作成します。プロジェクト作成は以下を参考にして下さい。

Angular2のプロジェクト作成からデプロイまで

 

3.ng2-bootstrapとbootstrapのインストール

npmでng2-bootstrapとbootstrapのパッケージをローカルインストールします。[--save]オプションを指定して、package.jsonにパッケージ情報を書き込みます。

 

4.src/app/app.module.tsの編集

src/app/app.module.tsを編集して、ng2-bootstrapのモジュールのインポート定義を行います。AlertModule、ModalModule、ButtonsModule...のように別々のモジュールを個別にインポートしても構いませんが、いろいろ使っていくとインポートするモジュールも多くなって面倒なので、全てを読み込むNg2BootstrapModuleを定義しています。

 

5.angular-cli.jsonの編集

angular-cli.jsonにbootstrapのcssを追加します。

 

6.動作テスト確認

src/app/app.component.htmlを編集してng2-bootsrapの動作テストを行います。Alertモジュールを使用してアラートメッセージを表示します。

 

 

 

スポンサーリンク

スポンサーリンク

-Angular2, 開発環境構築

執筆者:

関連記事

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。 angular-cliでAngular2の開発環境を構築している事が前提と ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

Angular2のコンポーネントについての説明

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...