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フォルダに移動してから、
以下のコマンドを実行します。
1 2 | > cd APP_NAME> npm install --save bootstrap font-awesome |
これでbootstrapとfont-awesomeがnode_modulesフォルダ以下にインストールできました。
あとはそれをstyles.cssに指定すればOKです。
1 2 | @import "~bootstrap/dist/css/bootstrap.min.css";@import "~font-awesome/css/font-awesome.css"; |
手順1′.angular-cli.jsonに記述する
上記のようにstyles.cssでimportする方法以外に、angular-cli.jsonに記述する方法もあります。
1 2 3 4 5 | "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.css"], |
手順2.確認
それではいずれかのコンポーネントのHTMLに以下の様に追記してみましょう。
1 | <button class="btn btn-success">TEST</button> |
Bootstrapのスタイルが効いた”TEST”ボタンが表示されればOKです。
手順3.jQueryをインストール
続いてjQueryをインストールしていきましょう。
先ほどと同様にnpmコマンドで。
1 | > npm install --save jquery |
jquery.min.jsファイルをindex.html側で読み込むか、
以下の様にangular-cli.jsonに記述します（jQueryだけでなくbootstrapのjsも記述しておきます）。
1 2 3 4 | "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の後に以下の様に追記します。
1 2 3 4 5 | "scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js","test.js"] |
test.jsの中身はjQueryの動作が確認できれば何でもよいのですが、今回は以下の様にしてみました。
1 2 3 | $(function(){ $("body").css("background-color","red")}); |
背景が赤くなったらOKです。
感想
Webページを作成しているとやはりbootstrapやjQueryを使いたくなることは多いので、
インストール方法を知っておくと便利だなと思いました。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
