Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築


これから AngularJS でアプリケーションを作るぜ！という方向けの、環境構築メモです。

- モダンな開発をするために総合開発環境として Yeoman を利用
	- おすすめとされる AngularJS アプリケーション構成も適用
- 最低限のUIライブラリはいるだろうということで UI Bootstrap(AngularJS用のBootstrap)を導入
- IDEとして [WebStorm](http://www.jetbrains.com/webstorm/) を利用
	- ただこれは私がたまたま使ってるだけなので、使わなくてもOK

ちなみに私が試した環境は、つぎのとおりです。

- Mac OS X 10.9.1
- node v0.10.25
- npm 1.3.24

## YeomanとAngularJS雛形ジェネレータをインストール

もしお使いの環境にまだ導入されてなければ npm でインストールします。

```
$ npm install -g yo grunt-cli bower
$ npm install -g generator-angular
```

## AngularJSの雛形を生成

WebStormの新規プロジェクトを適当な名前で開き、ターミナルで（なければ普通に Mac のターミナルで適当なディレクトリを作成し配下へ移動して）、

![スクリーンショット 2014-03-10 16.43.00.png](https://qiita-image-store.s3.amazonaws.com/0/35733/9e9b1148-cca2-ca2e-08b6-c23551e6ce10.png "スクリーンショット 2014-03-10 16.43.00.png")

![スクリーンショット 2014-03-10 16.45.14.png](https://qiita-image-store.s3.amazonaws.com/0/35733/0c21383a-1fd7-cda4-f361-e52b3f4571b5.png "スクリーンショット 2014-03-10 16.45.14.png")

次のようにコマンドを入力します。

```
$ yo angular --minsafe [今回作るアプリケーション名]
```

※ この `[今回作るアプリケーション名]App` が AnugularJS上のアプリケーション名となります（例：`Test`を指定した場合は`TestApp`）。後から変える場合は `index.html` `app.js` `main.js` を書き換えてください。

この時、インストールするモジュールを YES/NO で聞かれます。BootstrapとAngular系モジュールを選択して（つまり Sass だけ除いて）て導入します。まあ必要あれば Sass を導入しても構いません。

![スクリーンショット 2014-03-10 16.24.18.png](https://qiita-image-store.s3.amazonaws.com/0/35733/864c0169-ef0a-2dd9-28d9-122f0587afef.png "スクリーンショット 2014-03-10 16.24.18.png")

※もし NO と答えても、`$ bower install bootstrap --save` のように後から Bower で簡単に追加インストールできます。

つづいて UI Bootstrap をインストールします。ターミナルで、

```
$ bower install angular-bootstrap --save
```

`--save` を指定することにより `bower.json` でパッケージ管理されるようになります。パッケージ管理しておかないと、後で全モジュールを入れ直す場合やproduction用コード（後で説明）を作る場合に困るので、ちゃんとパッケージ管理しておきましょう（ちなみに、もしproduction用コードに含めないパッケージの場合は `--save-dev` を指定します）。
また、Bower で管理しているパッケージは `bower.json` ファイルで確認できます。

![スクリーンショット 2014-03-10 16.55.38.png](https://qiita-image-store.s3.amazonaws.com/0/35733/056f3c6f-bcf0-5ae7-74b9-0aa7e58b9e54.png "スクリーンショット 2014-03-10 16.55.38.png")

次に `app.js` を開き、利用するモジュールに `ui.bootstrap` を追加します。

![スクリーンショット 2014-03-10 16.51.18.png](https://qiita-image-store.s3.amazonaws.com/0/35733/e75d752f-77da-0475-7429-b481f9f7b1cc.png "スクリーンショット 2014-03-10 16.51.18.png")

`index.html` を開き、下記の1行を追加します（`UI Bootstrap` の JSファイルを読み込み）。

```
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
```

---

**[2014/3/15追記]** `jquery.js` と `bootstrap.js` をインクルードしている2行を削除してください。Bootstrap と UI Bootstrap が競合するため（jQueryは bootstrap.js が不要ならこちらもいらないのでついでに削除）。

---

**[2014/4/8追記]** 手動で `index.html` を修正しなくても、次のようにコマンド叩くと自動で `index.html` を修正してくれるようです。

`$ grunt bower-install`

---

それ以外も `lang="ja"` を追加したり、もろもろ自分ルール^^; と違うところを直します。
結果は次のとおり（面倒であればコピペして使ってもらって構いません。ただ`ng-app="[アプリケーション名]App"`は`app.js``main.js`に記載のものと合わせてください）。

```html:index.html
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head lang="ja">
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="testApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <!-- endbuild -->
</body>
</html>
```

これで完了です！

試しに WebStorm のプレビュー機能で `index.html` を開いてみます。
レスポンシブにも対応していますね^^

![スクリーンショット 2014-03-10 17.12.43.png](https://qiita-image-store.s3.amazonaws.com/0/35733/5a891398-f82f-e86a-fd02-1e620b70f43d.png "スクリーンショット 2014-03-10 17.12.43.png")

もし WebStorm を利用していない場合でも、Grunt で確認できます。Macのターミナルで、

```
$ cd Test
$ grunt serve
```

そうすると標準のブラウザ？が次のように開きます。

![スクリーンショット 2014-03-10 17.18.17.png](https://qiita-image-store.s3.amazonaws.com/0/35733/01778fe1-239c-b14a-3951-d2ecf37c0fb6.png "スクリーンショット 2014-03-10 17.18.17.png")

いや〜、Grunt便利ですね。

プログラム構成的には AngularJS の推奨する構成になっており、Yeomanを利用した効率的な開発環境＆Bootstrapで最低限の見た目はカバーできている環境の出来上がりです。
（私的には WebStorm の導入もおすすめです。有償ですが。）

## 環境ができたら

TOPページのVIEWは `main.html` 、ロジックは `main.js` ですので（デフォルトでは上記プレビューの通り Yeoman のサンプルが記載されています）、これらに自分のアプリケーションを書いていけばOKです。
(`index.html` および `app.js` はアプリケーション全体の記載をするものなのでそうはいじらないはずです。それがAngulsrJSの思想みたい。)

`index.html` は一度ブラウザに読み込まれれば再度サーバに取得することはなく、このブラウザ側の `index.html` を起点とし、必要に応じて `main.html` 等をロードする形式になります。
（`index.html`はディスパッチみたいな役割をし、ここ自体にはHTMLタグを書くことはない。）

JSファイルとHTMLファイルを追加する場合は、

![スクリーンショット 2014-03-10 17.41.50.png](https://qiita-image-store.s3.amazonaws.com/0/35733/cef783ec-8579-9afa-d965-4feb213ba8a0.png "スクリーンショット 2014-03-10 17.41.50.png")

- ロジック（モデルとコントローラ）ファイルは app/scripts/controllers/ に配置します。
- VIEW（HTML）ファイルは app/views/ に配置します。

ロジックとVIEWを増やす場合（ページを増やす場合）は、`app.js` で新たに URL と Controller、View の対応づけを設定し、`index.html` で追加したJSファイルをインクルードします。

DirectiveやService用の構成を追加する場合は、次のように出来るようです。
[AngularJS Ninja](http://angularjsninja.com/blog/2013/08/31/yeoman-generator-for-angularjs/)

## production用（本番用）のファイルを作成する場合

まず、Bowerのコンポーネントを本番用にします。

```
$ bower install --production
```

`--production` を指定することで、`bower.json` 中のDEV用パッケージが除かれ `bower_components` ディレクトリが展開されます。

次に、Gruntでビルドします。

```
$ grunt build
```

`dist` ディレクトリに本番配信用のファイル（minifyされてる？）が展開されます。

## 参考にしたサイト

- [Yeomanを使ってAngularJSアプリのひな形をつくってみる](http://dev.classmethod.jp/client-side/yo-angular/)
- [AngularJS Startup Advent Calendar 2013の5日目](http://blog.kinzal.net/post/68979324453/yeoman-angularjs-qiita-advend-calendar)
- [Bower入門(基礎編)](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)
- [AngularJSとTwitter Bootstrapを組み合わせて使う](http://qiita.com/zoetro/items/eb3a44e4baa8c367b4aa)