前の投稿（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（CSS読み込み）

<link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css">

index.html（JS読み込みとRequireJSの設定）

<script src="bower_components/requirejs/require.js"></script>
<script>
  require.config({baseUrl: 'bower_components'});
</script>
<script src="bower_components/famous-angular/dist/famous-angular.js"></script>

※ 修正後の index.html全体はこちらに置いてあります（GitHub）。

AngularJSにFamo.us/Angularを組み込みます。

app/scripts/app.js

'use strict';

angular.module('famousAngularTest2App', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
+  'famous.angular'
])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

main.css を次のようにします。後述しますが、なぜかこうしないと画面表示がされないので。
app/styles/main.css
```
.full-screen {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
```

動作確認用に、AngularJSのControllerを書きます。

app/scripts/controllers/main.js

'use strict';

angular.module('famousAngularTest2App')
  .controller('MainCtrl', ['$scope', '$famous', function ($scope, $famous) {

    $scope.hoge = 'Hello!!';

    // 何やってるか不明。今回だとこれ書かなくても動く
    var EventHandler = $famous['famous/core/EventHandler'];
    $scope.eventHandler = new EventHandler();

  }])
;

次はViewを書きます。

app/views/main.html

<fa-app ng-controller="MainCtrl" class="full-screen">

    <fa-modifier
            fa-translate="[30, 30, 0]">
        <fa-surface
                fa-size="[100, 100]"
                fa-background-color="'rgba(111, 222, 333, 1)'">
            {{hoge}}
        </fa-surface>
    </fa-modifier>

</fa-app>

※ さきほどCSS定義したfull-screenクラスを利用します。そうしないと、表示領域の問題？なのか、画面に何も表示されない為。

動作確認

ターミナルで $grunt serve を実行すると、次のように表示されます。

後は、Famo.us/Angular のドキュメントや、Famo.us本体のドキュメントを参考しながら開発を進めていけばいいのですが、ゼロから覚えるにはちょっと敷居が高いかなあという印象です。
（ネット上にもまだ、情報が少ないですね。）

ほか

今回のソースはGitHubに置いてあります⇒https://github.com/hkusu/AngularJS_famous_demo

AngularJS と Famo.usを連携して Hello Warld を表示するまで

概要

前提

手順

AngularJSの雛型を作成

Bower で Famo.us/Angular をインストール

雛型ソースを修正

動作確認

ほか