簡(jiǎn)介
AngularFire是AngularJS中的Firebase庫。AngularJS誕生于2009年，后被Google收購，是一款優(yōu)秀的前端JS框架，如果您對(duì)它還不了解，可以先移步《AngularJS教程》。Angular應(yīng)用很大一部分操作都是從服務(wù)端下載數(shù)據(jù)，然后填充到一個(gè)本地對(duì)象或數(shù)組中，這需要很多冗余的代碼，也會(huì)產(chǎn)生一些復(fù)雜的邏輯。而AngularFire正可以解決這一點(diǎn)，AngularFire的主要功能就是操作你本地的數(shù)據(jù)庫與Firebase數(shù)據(jù)庫同步，它把Firebase的實(shí)時(shí)觀察功能集成到了Angular的digest中，這樣減少了很多冗余代碼，簡(jiǎn)化了流程。下面我們講解下如何結(jié)合AngularFire來做一款簡(jiǎn)單的Angular應(yīng)用。
導(dǎo)入AngularFire
首先我們需要使用bower下載，在應(yīng)用目錄下執(zhí)行bower install angularfire angularfire-route --save。安裝成功后，我們?cè)?code>index.html中導(dǎo)入以下幾個(gè)js依賴
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
然后打開app.js把firebase模塊進(jìn)行聲明，angular.module('app', ['ngRoute', 'firebase'])。聲明完后，就完成了AngularFire的導(dǎo)入。
Firebase對(duì)象
有兩種AngularFire獲得數(shù)據(jù)的方式，一個(gè)是對(duì)象方式($firebaseObject)，另一個(gè)是數(shù)組方式($firebaseArray)。這里我們先用對(duì)象方式同步某一個(gè)節(jié)點(diǎn)的數(shù)據(jù)。同步很簡(jiǎn)單，正如前幾章所講解的一樣，可以使用如下方法。
var rootRef = new Firebase('https://fire-gochat.firebaseio.com');
var msgRef= rootRef.child('messages').child('msg1');
this.message = $firebaseObject(msgRef);
然后在到模板頁面把this.message在controller模板中使用即可。
完成以上代碼后，我們需要搭建一個(gè)web服務(wù)器，你可以用nginx或者也可以用node提供的http-server。只需要在工作目錄下運(yùn)行http-server，web服務(wù)器則成功運(yùn)行。如果http-server未安裝，可以執(zhí)行sudo npm install http-server -g進(jìn)行安裝。
chris@chris-ubuntu:~/Workplace/chatweb$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.199.136:8080
此步成功后，我就能通過地址訪問了，訪問結(jié)果如下
你可能注意到里面包含了$id和$priority，它們不是我們用戶數(shù)據(jù)的內(nèi)容，而是每個(gè)節(jié)點(diǎn)都默認(rèn)包含的字段，一個(gè)表示關(guān)鍵字，另一個(gè)表示順序，默認(rèn)的順序安裝id的關(guān)鍵字的字典序來排，如果有priority，則按照priority來排序，priority為空的排在不為空的前面。當(dāng)你改變值時(shí)，你也會(huì)看到頁面的數(shù)據(jù)同步更新。
依賴注入
你可能會(huì)看到以上代碼
var rootRef = new Firebase('https://fire-gochat.firebaseio.com');，
有兩個(gè)隱患，第一它直接使用了魔鬼字符串，作為值傳入到構(gòu)造函數(shù)中，因?yàn)樽址赡軙?huì)變，如果我們填寫錯(cuò)誤，會(huì)造成很大問題。第二個(gè)是這行代碼使用了new創(chuàng)建Firebase，而Angular提倡依賴注入方式，所以也不夠好。app.js代碼修改如下:
angular
.module('app', ['ngRoute', 'firebase'])
.constant('FirebaseUrl', 'https://fire-gochat.firebaseio.com') //聲明常量
.service('rootRef', ['FirebaseUrl', Firebase])//構(gòu)造Firebase引用
.service('messages', Messages)//創(chuàng)建一個(gè)處理Message的service
.controller('MyCtrl', MyController)
.config(ApplicationConfig);
function ApplicationConfig($routeProvider) {
$routeProvider.when('/', {
controller: 'MyCtrl as ctrl',
templateUrl: 'myctrl.html',
})
}
function Messages(rootRef, $firebaseObject) {
var msgRef = rootRef.child('messages');
this.get = function get(id) {
return $firebaseObject(msgRef.child(id));
}
}
function MyController(messages) {
this.message = messages.get('msg2');
}
注意：以上controller部分中的this.message引用是異步取得的，所以這里不可以直接使用this.message.content來獲得相應(yīng)字段內(nèi)容，數(shù)據(jù)在Firebase云端有更新時(shí)，會(huì)去更新Firebase對(duì)象，然后觸發(fā)Angular的digest機(jī)制，digest會(huì)檢查所有變化，然后更新視圖
Firebase數(shù)組
有了上面的基礎(chǔ)，再來使用Firebase數(shù)組就很簡(jiǎn)單了，在Messages中加入$firebaseArray
function Messages(rootRef, $firebaseObject, $firebaseArray) {
var msgRef = rootRef.child('messages');
this.get = function get(id) {
return $firebaseObject(msgRef.child(id));
}
this.all = function all() {
return $firebaseArray(msgRef);
}
}
function MyController(messages) {
this.message = messages.get('msg2');
this.messages = messages.all();
}
然后在myctrl.html中把內(nèi)容都打印出來
<ul>
<li ng-repeat="msg in ctrl.messages">
{{ msg.name }}
</li>
</ul>
代碼地址：https://github.com/CPPAlien/AngularFireExample
相關(guān)視頻：https://www.youtube.com/watch?v=XDuL3yYMC44
