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

## AngularFireとは？

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

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

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

* Firebase公式サイト
https://www.firebase.com/

* AngularFireチュートリアル
https://www.firebase.com/tutorial/#tutorial/angular/0


##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ファイルを作成して、
ヘッダー部分に次の行を書きましょう。

```add
<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が使えるようになります。

```add
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を一緒に追加するだけです。

  
  
```add
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/ 



```add
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()関数を使うだけです。

つまり、こうなります。

```add
<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 ***



追加コード

```add
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を使えるので、
ぜひ試してみて下さい！


https://www.firebase.com/tutorial/#gettingstarted