搭建 Famo.us/Angular 的开发环境（2014年11月版）

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

步骤 (bù

在合适的目录中创建一个文件夹并启动生成器。

$ 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系列。

{
  "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 集成到项目中。

〜

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

〜

<!-- 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的官方参考资料尝试了一下。

控制器

'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();

  });

观看

〜

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

〜

<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 (Cascading Style Sheets) 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 上。如果你在环境设置方面遇到了问题，请克隆代码。⇒ https://github.com/hkusu/famous_angular_demo