AngularJS と Famo.usを連携して Hello Warld を表示するまで
Qiitaにも投稿しましたがこちらにも。
前の投稿（Yeomanのジェネレータを使ってFamo.usを試したメモ）に続いて、今回は Famo.us を AngularJS と連携させてみたので、Hello World を表示するまでの手順を説明します。
概要
- Famo.us とは
- アプリっぽいUIが作れるJavaScriptのフレームワークです。
- 公式ページ：http://famo.us
- 公式のデモ：http://famo.us/demos
- わりとリッチです。
- AngularJSとの連携は、公式から提供されている Famo.us/Angular を利用します。
- Bower でインストールできます。
- GitHub：http://famo.us/integrations/angular/
前提
- 私の開発環境 は Mac OS X v10.9.2 (Mavericks) です。
-
Yeoman と Yeoman の generator-angular を使います。
-
もしまだ入ってなければ、次のようにセットアップしてください。
# npm install -g yo grunt-cli bower # npm install -g generator-angular
-
手順
AngularJSの雛型を作成
-
ターミナルで下記のコマンドを実行します。
$ yo angular --minsafe
-
Sassを使うか聞かれますが、なんか競合しそうなので無難に No を選択。Bootstrap も No を選択。Angular系のモジュールは、一応そのまま入れることにします。
Bower で Famo.us/Angular をインストール
-
ターミナルで下記のコマンドを実行します。
$ bower install famous-angular --save
-
AngularJSのバージョンが競合するのですが、Famo.us/Angularを優先して 2 を選択。
-
ここまでの手順でディレクトリ構成は次のようになっていると思います。
- Famo.us は内部的に RequireJS を使ってるようです。
雛型ソースを修正
-
index.html に下記を追記します。
※ 修正後の
index.html全体はこちらに置いてあります（GitHub）。 -
AngularJSにFamo.us/Angularを組み込みます。
-
main.css を次のようにします。後述しますが、なぜかこうしないと画面表示がされないので。
-
動作確認用に、AngularJSのControllerを書きます。
-
次はViewを書きます。
※ さきほどCSS定義したfull-screenクラスを利用します。そうしないと、表示領域の問題？なのか、画面に何も表示されない為。
動作確認
ターミナルで $grunt serve を実行すると、次のように表示されます。
後は、Famo.us/Angular のドキュメント や、Famo.us本体のドキュメントを参考しながら開発を進めていけばいいのですが、ゼロから覚えるにはちょっと敷居が高いかなあという印象です。
（ネット上にもまだ、情報が少ないですね。）
ほか
今回のソースはGitHubに置いてあります⇒https://github.com/hkusu/AngularJS_famous_demo
