Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
202
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@hkusu

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

これから 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されてる?)が展開されます。

参考にしたサイト

202
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
202
Help us understand the problem. What is going on with this article?