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


前の投稿（[Yeomanのジェネレータを使ってFamo.usを試したメモ](http://qiita.com/hkusu/items/9a399a92f07e377eb95c)）に続いて、今回は Famo.us を AngularJS と連携させてみたので、Hello World を表示するまでの手順を説明します。

# 概要

- Famo.us とは
	- アプリっぽいUIが作れるJavaScriptのフレームワークです。
	- 公式ページ：http://famo.us
	- 公式のデモ：http://famo.us/demos
		- わりとリッチです。
- AngularJSとの連携は、公式から提供されている [Famo.us/Angular](http://famo.us/integrations/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の雛型を作成

- ターミナルで下記のコマンドを実行します。

	```shell
	$ yo angular --minsafe
	```

- Sassを使うか聞かれますが、なんか競合しそうなので無難に No を選択。Bootstrap も No を選択。Angular系のモジュールは、一応そのまま入れることにします。

	<img src="http://staffblog.yumemi.jp/wp-content/uploads/2014/05/スクリーンショット-2014-05-27-17.13.42.png" width="500" />

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

- ターミナルで下記のコマンドを実行します。

	```shell
	$ bower install famous-angular --save
	```

- AngularJSのバージョンが競合するのですが、Famo.us/Angularを優先して 2 を選択。

	<img src="http://staffblog.yumemi.jp/wp-content/uploads/2014/05/スクリーンショット-2014-05-27-17.18.45.png" width="500" />

- ここまでの手順でディレクトリ構成は次のようになっていると思います。
	- Famo.us は内部的に RequireJS を使ってるようです。

	<img src="http://staffblog.yumemi.jp/wp-content/uploads/2014/05/スクリーンショット-2014-05-27-17.19.44.png" width="250" />

## 雛型ソースを修正

- index.html に下記を追記します。

	```html:index.html（CSS読み込み）
	<link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css">
	```

	```html: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`全体は[こちら](https://raw.githubusercontent.com/hkusu/AngularJS_famous_demo/master/index.html)に置いてあります（GitHub）。

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

	```diff: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 を次のようにします。後述しますが、なぜかこうしないと画面表示がされないので。

	```css:app/styles/main.css
	.full-screen {
	    position: fixed;
	    bottom: 0;
	    top: 0;
	    left: 0;
	    right: 0;
	}
	```

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

	```javascript: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を書きます。

	```html: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` を実行すると、次のように表示されます。

<img src="http://staffblog.yumemi.jp/wp-content/uploads/2014/05/スクリーンショット-2014-05-27-18.17.56.png" width="250" />

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

# ほか

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