bowerを使ってangularとbootstrapのウェブアプリ開発環境を秒速で整える方法

(注：mac前提で書いています。windowsのことは良くわからないです…)

急ぐ人のために

bowerとか既に入っているよ、という人は以下のコマンド(1,2)を打った後に、後ろの方についているHTML、js、cssファイルをコピーしてください。以上です。

  1. bower install angular-bootstrap
  2. bower install bootstrap

ファイル構成は、以下を想定しています。

index.html
js/app.js
css/app.css

ゆっくり解説

ここからは、秒速ではなく、1つ1つやっていきます。
流れとしては、homebrew → nodebrew → nodejsとnpm → bower → angularとbootstrapのインストールと言う流れになります。

homebrewについて

homebrewは、apple社が予め入れといてくれなかった、でも自分には必要!!、というソフトウェアのバージョン管理に使います。
今回のケースだと、nodebrewですね！

  • インストール

以下のコマンドをコンソールに打ち込みます。(1行です)

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

上のコマンドは、変わっているかも知れないので、本家を確認することをオススメします。
brew.sh

nodebrew について

nodebrewは、nodejs周りのパッケージのバージョン管理ツールです。
nodejsで複数の環境を切り替えながら開発する時に便利です。
普段は、最新版を使いつつ、例えば、AWSのlambda向けの開発時には、バージョン、XX.xでと言うように使うと便利です。(多分)

  • インストール
brew install nodebrew

もしくは、以下のgithubの手順でインストールします。(こちらだとhomebrew不要です。)
github.com

nodejsとnpmについて

nodejsは、サーバサイドのjavascript実行環境です。とは言いつつ便利なのでローカル環境でも使っています。
IOの非同期処理に特化しており、大量のIOを消費するような昨今のサーバにピッタリです(AWSはこれが無いと辛いです)。
npmは、nodejsで使えるライブラリ群を管理してくれます(npm install hogehogeでサクサク入るので便利です)。

  • インストール

nodebrewを最新版にします。

nodebrew selfupdate

nodejsとnpmをインストールします。ここでは、バイナリでインストールしています。
(ホーム直下に、.nodebrew/srcがない場合は作成してください。)

nodebrew use latest

入ったバージョンを確認します。

nodebrew ls

バージョンを指定して使います(下のXは自分の環境に入ったバージョン番号にしてください)。
PATHを通して置かないと(bashだとexport PATH=$HOME/.nodebrew/current/bin:$PATH)して置かないと、nodeとnpmが見つからないので注意してください。

nodebrew use vX.XX.XX

もしくは、以下の本家からインストールします(この場合は、nodebrew不要です)。
Node.js

bowerについて

bowerとは、ウェブのためのパッケージ管理ソフトです。
要は、ブラウザ上でjavascriptを使ってウェブアプリを作成する際のパッケージ管理をしてくれます。

  • インストール

以下のコマンドを実行します。
gオプションをつけているので、環境全体にインストールされます(嫌いな人は外しましょう)。

npm install -g bower

Bower — a package manager for the web

angularについて

angularhは、google社が提供しているウェブアプリ向けのjavascriptライブラリです。
利点をあげると以下のようになるでしょうか。

  1. DOMを直接操作しなくて良い。
  2. 流儀に則って書くだけで、ModelとViewとControllerに勝手に分かれるので、後から見てわかりやすい。
  3. Directiveを使うとHTMLの操作が楽
  4. 独自にインポート機構を持っているので、ファイルに分割する場合に気にすることが少ない。
  • インストール

今回は、bootstrapと一緒に使うので、以下のコマンドを実行します。

bower install angular-bootstrap

github.com
AngularJS — Superheroic JavaScript MVW Framework

bootstrapについて

bootstrapは、twitter社が作成したcss群です。
レスポンシブルなUIを構築するのに便利で、画面を横に12分割して考えます。
2009年頃に、スマホ向けのサイトの作成に苦労した記憶がありますが、bootstrapを使えば解決です。

  • インストール
bower install bootstrap

getbootstrap.com

サンプルファイル

  • HTMLはコチラ (index.html)
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css"
	  href="bower_components/angular-bootstrap/ui-bootstrap-csp.css"/>
    <link rel="stylesheet" type="text/css"
	  href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css"
	  href="css/app.css"/>
    <script type="text/javascript"
	    src="bower_components/angular/angular.min.js" ></script>
    <script type="text/javascript"
	    src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript"
	    src="js/app.js" ></script>
  </head>
  <body>
    <div class="container sample" ng-controller="ButtonsCtrl">
      <div class="row">
	<div class="col-lg-8">
	  <button type="button" class="btn btn-primary">
	    hello bootstrap (no action)</button>
	</div>
	<div class="col-lg-4">
	  <button type="button" class="btn btn-primary" ng-click="click_btn()">
	    hello angular</button>
	</div>
      </div>
    </div>
  </body>
</html>
  • jsファイルはこちら (js/app.js)

ui.bootstrapのライブラリを読み込んで使っています。
"app"と言うモジュールにしていますが、ここは適宜変更してください(変更した場合は、html側の修正もお忘れなく)。
"ButtonsCtrl"も同様です。

angular.module('app', ['ui.bootstrap'])
    .controller('ButtonsCtrl', ['$scope',function($scope) {
	$scope.click_btn = function() {
	    alert("DONE!")
	}
    }]);

ぶっちゃけ無くても動きます。

div.sample {
    margin-top : 30px;
}