BootstrapとjQueryを使えるようにする｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はAngularを使いつつ、BootstrapとjQueryと、ついでにfont-awesomeも使えるようにしたいと思います。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.bootstrapをインストール（ついでにfont-awesomeも）

VisualStudioCodeのコンソールか、コマンドプロンプトで、前々回生成したsampleAppフォルダに移動してから、
以下のコマンドを実行します。

> cd APP_NAME
> npm install --save bootstrap font-awesome

これでbootstrapとfont-awesomeがnode_modulesフォルダ以下にインストールできました。
あとはそれをstyles.cssに指定すればOKです。

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

手順1′.angular-cli.jsonに記述する

上記のようにstyles.cssでimportする方法以外に、angular-cli.jsonに記述する方法もあります。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

手順2.確認

それではいずれかのコンポーネントのHTMLに以下の様に追記してみましょう。

<button class="btn btn-success">TEST</button>

Bootstrapのスタイルが効いた”TEST”ボタンが表示されればOKです。

手順3.jQueryをインストール

続いてjQueryをインストールしていきましょう。
先ほどと同様にnpmコマンドで。

> npm install --save jquery

jquery.min.jsファイルをindex.html側で読み込むか、
以下の様にangular-cli.jsonに記述します（jQueryだけでなくbootstrapのjsも記述しておきます）。

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

※angular-cli.jsonに記載するときには「ng serve」で再起動します。

手順4.確認

HTMLに以下の様に記述して実行されるかを確認してみましょう。
まずtest.jsを作成し、angular-cli.jsonのjqueryの後に以下の様に追記します。

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"test.js"
]

test.jsの中身はjQueryの動作が確認できれば何でもよいのですが、今回は以下の様にしてみました。

$(function(){
  $("body").css("background-color","red")
});

背景が赤くなったらOKです。

感想

Webページを作成しているとやはりbootstrapやjQueryを使いたくなることは多いので、
インストール方法を知っておくと便利だなと思いました。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載