Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

概要

前提

  • 私の開発環境 は Mac OS X v10.9.2 (Mavericks) です。
  • Yeoman と Yeoman の generator-angular を使います。

    • もしまだ入ってなければ、次のようにセットアップしてください。

      # npm install -g yo grunt-cli bower
      # npm install -g generator-angular
      

手順

AngularJSの雛型を作成

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

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

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

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

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

  • ここまでの手順でディレクトリ構成は次のようになっていると思います。

    • Famo.us は内部的に RequireJS を使ってるようです。

雛型ソースを修正

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

    index.html(CSS読み込み)
    <link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css">
    
    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全体はこちらに置いてあります(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
    <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 を実行すると、次のように表示されます。

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

ほか

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away