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ファイルを作成して、
ヘッダー部分に次の行を書きましょう。
<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ファイルを編集・改変していくかたちで進みます。
<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"]);
<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
}
]);
<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();
すると、こうなります。
<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>
<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は全部で4つあります。
https://www.firebase.com/docs/web/guide/retrieving-data.html **
追加コード
myDataRef.on('child_added', function(snapshot) {
//We'll fill this in later.
});
結果。
<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 );
これが、最終形になります。
<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を使えるので、
ぜひ試してみて下さい!