bootstrap
grunt
AngularJS
bower
yeoman

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

More than 1 year has passed since last update.

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

  • モダンな開発をするために総合開発環境として Yeoman を利用
    • おすすめとされる AngularJS アプリケーション構成も適用
  • 最低限のUIライブラリはいるだろうということで UI Bootstrap(AngularJS用のBootstrap)を導入
  • IDEとして 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

スクリーンショット 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

※もし 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

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

スクリーンショット 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.jsbootstrap.js をインクルードしている2行を削除してください。Bootstrap と UI Bootstrap が競合するため(jQueryは bootstrap.js が不要ならこちらもいらないのでついでに削除)。


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

$ grunt bower-install


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

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

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

$ cd Test
$ grunt serve

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

スクリーンショット 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

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

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

DirectiveやService用の構成を追加する場合は、次のように出来るようです。
AngularJS Ninja

production用(本番用)のファイルを作成する場合

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

$ bower install --production

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

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

$ grunt build

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

参考にしたサイト