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

Famo.us/Angular の現時点での環境構築の手順と、動作確認まで。

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

前提

手元のOS：Mac OS X 10.9.5 (Mavericks)
- Yeoman と、Yeoman の AngularJS雛型ジェネレータを使います。
  - もし Yeoman が Mac に入っていなければ、こちらを参考にインストールしてください。
    - Mac で Yeoman の環境を構築する手順
  - もし雛型ジェネレータが Mac に入っていなければ、次のようにインストールしてください。
    $ 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

手順

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

$ mkdir famous_angular_test
$ cd famous_angular_test
$ yo angular

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

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

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

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

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

$ cd famous_angular_test
$ bower install famous-angular --save

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

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

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 を組み込み

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: '/'
      });
  });

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の公式リファレンスを元にやってみました。

Controller

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

app/index.html

〜

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

〜

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

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/

おわりに

環境が出来たので、あとは Famo.us/Angularの公式リファレンスを元に、いろいろ試せるはずです。

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

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