LoginSignup
21
21

More than 5 years have passed since last update.

@kichiemon(きちえもん)

7ステップで出来るAngularFireチュートリアルをやってみた

Last updated at Posted at 2014-11-21

AngularFireとは？

AngularFireとは、FirebaseがサポートするAngular用APIです。

Firebaseがバックエンドの様々な機能を提供してくれているので、
これさえあればバックエンドを開発することなくWebアプリケーションを作成することが可能です。

Firebase, AngularJS自体については触れませんので、
詳しくは、下記のサイトをご参照ください。

Download方法

Downloadというよりは、導入方法ですね。
head部分に書くだけで使えます。

公式GitHubより
https://github.com/firebase/

angularFire
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

チュートリアル開始

チュートリアルは、対話形式で進められます。

ブラウザ内にエディターが用意されていて、
そこに書き込みながら学んでいきます。

実際に手を動かしながらチュートリアルが出来るので、
とても分かりやすいですね！

なお、ここでは
チャットアプリケーション
を作成する想定でチュートリアルを行います。

1. Install AngularFire「AngularFireのインストール」

まず、AngularFireを使えるようにする必要があります。

htmlファイルを作成して、
ヘッダー部分に次の行を書きましょう。

<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>

チュートリアルは、
一つのindex.htmlファイルを編集・改変していくかたちで進みます。

index.html
<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <link rel='stylesheet' href='/resources/tutorial/css/example.css'/>
  </head>
  <body>
  </body>
</html>

はい、これだけで導入できました。めちゃ簡単ですね。

2. Creating an Angular Module「モジュール作成」

さあ、まずはfirebaseをmoduleに追加しましょう。

これだけで、$firebaseが使えるようになります。

var myApp = angular.module("myApp", ["firebase"]);
index.html
<html ng-app="myApp">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <link rel='stylesheet' href='/resources/tutorial/css/example.css'/>
  </head>
  <body>
    <script>

      ///ここに追加
      var myApp = angular.module("myApp", ["firebase"]);

    </script>
  </body>
</html>

3. Creating a Controller「コントローラー作成」

こちらも簡単です。

Angularのcontrollerへ依存性を注入するときに、

$firebaseを一緒に追加するだけです。

myApp.controller('MyController', ['$scope', '$firebase',
  function($scope, $firebase) {
    //Code here
  }
]);
index.html
<html ng-app="myApp">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <link rel='stylesheet' href='/resources/tutorial/css/example.css'/>
  </head>
  <body ng-controller="MyController">
    <script>

      var app = angular.module("myApp", ["firebase"]);

     ///追加部分
      myApp.controller('MyController', ['$scope', '$firebase',
          function($scope, $firebase) {
            //Code here
          }
       ]);

    </script>
  </body>
</html>

4. Binding a Model to Firebase「Firebaseのデータモデルとバインディングする」

デモ用に提供されたfirebaseのデータとバインディングします。
https://rig9dtf5xj7.firebaseio-demo.com/ 

var ref = new Firebase("https://rig9dtf5xj7.firebaseio-demo.com/");
$scope.messages = $firebase(ref).$asArray();

すると、こうなります。

index.html
<html ng-app="myApp">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <link rel='stylesheet' href='/resources/tutorial/css/example.css'/>
  </head>
  <body ng-controller="MyController">
    <script>
      var myApp = angular.module("myApp", ["firebase"]);

      myApp.controller('MyController', ['$scope', '$firebase',
        function($scope, $firebase) {

            /// 追加部分
          var ref = new Firebase("https://rig9dtf5xj7.firebaseio-demo.com/");
          $scope.messages = $firebase(ref).$asArray();


        }
      ]);
    </script>
  </body>
</html>

これで、$scope.messagesとバインドされました。

5. Reading Data「データを読む」

次はデータを追加する方法です。

set()ではなく、push()関数を使うだけです。

つまり、こうなります。

<ul id='example-messages' class='example-chat-messages'>
  <li ng-repeat='msg in messages'>
    <strong class='example-chat-username'>{{msg.from}}</strong>
    {{msg.body}}
  </li>
</ul>
index.html
<html ng-app="myApp">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <link rel='stylesheet' href='/resources/tutorial/css/example.css'/>
  </head>
  <body ng-controller="MyController">

  /// 追加部分
  <ul id='example-messages' class='example-chat-messages'>
    <li ng-repeat='msg in messages'>
        <strong class='example-chat-username'>{{msg.from}}</strong>
            {{msg.body}}
        </li>
    </ul>


    <script>
      var myApp = angular.module("myApp", ["firebase"]);

      myApp.controller('MyController', ['$scope', '$firebase',
        function($scope, $firebase) {
          var ref = new Firebase("https://rig9dtf5xj7.firebaseio-demo.com/");
          $scope.messages = $firebase(ref).$asArray();
        }
      ]);
    </script>
  </body>
</html>

6. Writing Data「データの書き込み」

on( ) 関数を使います。

  • 第一引数に、どのような取得方法をするのか、というtype指定。
  • 第二引数に、取得したデータを処理するためのコールバック関数を入れます。

**typeは全部で４つあります。
https://www.firebase.com/docs/web/guide/retrieving-data.html **

追加コード

myDataRef.on('child_added', function(snapshot) {
  //We'll fill this in later.
});

結果。

index.html
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://mmafryy6x7l.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });

      /// ここに追加
      myDataRef.on('child_added', function(snapshot) {
           //We'll fill this in later.
       });

    </script>
  </body>
</html>

7.Using Snapshots「画面に表示する」

コールバック関数の引数で取得データを受け取り、
そこから値を取り出して、画面に表示します。

var message = snapshot.val();
displayChatMessage( message.name, message.text );

これが、最終形になります。

index.html
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://mmafryy6x7l.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>
  </body>
</html>

今回行ったチュートリアルはここ

いかがでしたか。

とても簡単にAngularJSでFirebaseを使えるので、
ぜひ試してみて下さい！

21
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
21
21