Famo.us/Angular の開発環境の構築（2014年11月版）


[Famo.us/Angular](http://famo.us/integrations/angular/#/intro) の現時点での環境構築の手順と、動作確認まで。

ライブラリの zip ファイルをダウンロードして利用してもいいのですが、AngularJS で追加ロジックをしっかり書く＆ビルドタスク等のフロントエンド環境を整える、ということを想定した環境です。

## 前提

- 手元のOS：`Mac OS X 10.9.5 (Mavericks)`
	- Yeoman と、Yeoman の [AngularJS雛型ジェネレータ](https://github.com/yeoman/generator-angular) を使います。
		- もし Yeoman が Mac に入っていなければ、こちらを参考にインストールしてください。
			- [Mac で Yeoman の環境を構築する手順](http://qiita.com/hkusu/items/0d2ed38c47b73201f4c2)
		- もし雛型ジェネレータが Mac に入っていなければ、次のようにインストールしてください。

			```shell:
			$ npm install -g generator-angular
			```

- 今回、利用するツール/ライブラリ郡の細かいバージョンは次のとおり。
	- Yeoman：`1.3.2`
	- Yeoman の generator-anglar：`0.10.0`
	- AngularJS：`1.2.26` ※ **1.3系では動きませんでした**
	- Famo.us：`0.3.0`
	- famous-angular：`0.5.0`

## 手順

### ① 適当なディレクトリを作ってジェネレータを起動

```shell:
$ mkdir famous_angular_test
$ cd famous_angular_test
$ yo angular
```

> CoffeeScript で書きたい方は `--coffee` オプションを追加してください。

### ② 対話インタフェースを適当に進める

Bootstrap は明らかに不要なので外しておきます。

![screen1.png](https://qiita-image-store.s3.amazonaws.com/0/35733/1477f952-0cc2-58fa-4941-41244ed6c930.png "screen1.png")

次のようにファイルが展開されるはずです。

![screen2.png](https://qiita-image-store.s3.amazonaws.com/0/35733/2ca9459f-b2ba-f897-aec6-faf32f0a912e.png "screen2.png")

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

```shell:
$ cd famous_angular_test
$ bower install famous-angular --save
```

> もし AngularJS のバージョンを選択するよう聞かれても、適当に進めてください（どのみち次の手順で 1.2系にするので）

### ④ AngularJS および周辺モジュールのバージョンを 1.2 系へバージョンダウン

```json:bower.json
{
  "name": "famous-angular-test",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "angular-resource": "~1.2.0",
    "angular-cookies": "~1.2.0",
    "angular-sanitize": "~1.2.0",
    "angular-animate": "~1.2.0",
    "angular-touch": "~1.2.0",
    "angular-route": "~1.2.0",
    "famous-angular": "~0.5.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0",
    "angular-scenario": "~1.2.0"
  },
  "appPath": "app"
}
```

ファイルを保存したら、`$ bower install` を実行。

### ⑤ プロジェクトへ Famo.us/Angular を組み込み

```diff:app/scripts/app.js
〜

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

```diff:app/index.html
〜

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
+<link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css" />
<!-- endbower -->
<!-- endbuild -->

〜

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
+<script src="bower_components/famous-angular/dist/famous-angular.js"></script>
<!-- endbower -->
+<script src="bower_components/famous/dist/famous-global.js"></script>
<!-- endbuild -->

〜
```

## 使ってみる

[Famo.us/Angularの公式リファレンス](http://famo.us/integrations/angular/docs/api/index.html) を元にやってみました。

### Controller

```javascript:app/scripts/controllers/main.js
'use strict';

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

    $scope.flipIt = function() {
      $famous.find('fa-flipper')[0].flip();
    };

    var EventHandler = $famous['famous/core/EventHandler'];
    $scope.views = [{color: 'red'}, {color: 'blue'}, {color: 'green'}, {color: 'yellow'}, {color: 'orange'}];
    $scope.myEventHandler = new EventHandler();

  });
```

### View

```html:app/index.html
〜

<div ng-view=""></div>

〜
```

```html:app/views/main.html
<fa-app>

  <fa-flipper>
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'orange'" fa-click="flipIt()">クリック！</fa-surface>
    </fa-modifier>
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'gray'" fa-click="flipIt()">もう一回クリック！</fa-surface>
    </fa-modifier>
  </fa-flipper>

  <fa-modifier fa-transform-order="['translate', 'rotateZ']"
               fa-rotate-z="0.3"
               fa-translate="[100, 300, 0]"
               fa-size="[100, 100]">
    <fa-surface fa-background-color="'black'"></fa-surface>
  </fa-modifier>

  <fa-scroll-view fa-pipe-from="myEventHandler">
    <fa-view ng-repeat="view in views">
      <fa-modifier fa-size="[300, 160]"
                   fa-translate="[250, 100, 0]">
        <!-- All events on fa-surfaces (click, mousewheel) are piped to $scope.myEventHandler -->
        <fa-surface fa-background-color="view.color"
                    fa-pipe-to="myEventHandler">
          上下へスクロール
        </fa-surface>
      </fa-modifier>
    </fa-view>
  </fa-scroll-view>

</fa-app>
```

### CSS

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

ファイルを保存したら、`$ grunt serve` で確認しみます。

デモはこちら ⇒ http://hkusu.github.io/famous_angular_demo/dist/

![screen3.png](https://qiita-image-store.s3.amazonaws.com/0/35733/5f2e6e7d-f74d-5e47-6293-4c418026d85e.png "screen3.png")

## おわりに

環境が出来たので、あとは [Famo.us/Angularの公式リファレンス](http://famo.us/integrations/angular/docs/api/index.html) を元に、いろいろ試せるはずです。

公式で提供されているサンプルはこちらにあります。
⇒ https://github.com/thomasstreet/famous-angular-examples

また、今回のソースは GitHub に置きました。環境が上手くできない方は clone してください。
⇒ https://github.com/hkusu/famous_angular_demo