使用 AngularJS 和 Famo.us 进行协作，实现显示 “Hello Warld” 直至达成
在之前的帖子（使用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
步骤 (bù
创建 AngularJS 的模板
在 Bower 上安装 Famo.us/Angular
修改原型源代码
index.html に下記を追記します。
index.html（CSS読み込み）
index.html（JS読み込みとRequireJSの設定）
※ 修正後の 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
{{hoge}}
※ さきほどCSS定義したfull-screenクラスを利用します。そうしないと、表示領域の問題？なのか、画面に何も表示されない為。
确认操作
当您在终端中执行”grunt serve”命令时，会出现以下显示。
之后，你可以参考Famo.us/Angular的文档和Famo.us本身的文档来进行开发，但要从零开始学习可能有一点难度，这是我的印象。（网络上还缺乏很多信息呢。）
还有其他选项
此次的源代码已经放在GitHub上⇒https://github.com/hkusu/AngularJS_famous_demo
