简介
AngularFire是AngularJS中的Firebase库。AngularJS诞生于2009年，后被Google收购，是一款优秀的前端JS框架，如果您对它还不了解，可以先移步《AngularJS教程》。Angular应用很大一部分操作都是从服务端下载数据，然后填充到一个本地对象或数组中，这需要很多冗余的代码，也会产生一些复杂的逻辑。而AngularFire正可以解决这一点，AngularFire的主要功能就是操作你本地的数据库与Firebase数据库同步，它把Firebase的实时观察功能集成到了Angular的digest中，这样减少了很多冗余代码，简化了流程。下面我们讲解下如何结合AngularFire来做一款简单的Angular应用。
导入AngularFire
首先我们需要使用bower下载，在应用目录下执行bower install angularfire angularfire-route --save。安装成功后，我们在index.html中导入以下几个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模块进行声明，angular.module('app', ['ngRoute', 'firebase'])。声明完后，就完成了AngularFire的导入。
Firebase对象
有两种AngularFire获得数据的方式，一个是对象方式($firebaseObject)，另一个是数组方式($firebaseArray)。这里我们先用对象方式同步某一个节点的数据。同步很简单，正如前几章所讲解的一样，可以使用如下方法。
var rootRef = new Firebase('https://fire-gochat.firebaseio.com');
var msgRef= rootRef.child('messages').child('msg1');
this.message = $firebaseObject(msgRef);
然后在到模板页面把this.message在controller模板中使用即可。
完成以上代码后，我们需要搭建一个web服务器，你可以用nginx或者也可以用node提供的http-server。只需要在工作目录下运行http-server，web服务器则成功运行。如果http-server未安装，可以执行sudo npm install http-server -g进行安装。
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
此步成功后，我就能通过地址访问了，访问结果如下
你可能注意到里面包含了$id和$priority，它们不是我们用户数据的内容，而是每个节点都默认包含的字段，一个表示关键字，另一个表示顺序，默认的顺序安装id的关键字的字典序来排，如果有priority，则按照priority来排序，priority为空的排在不为空的前面。当你改变值时，你也会看到页面的数据同步更新。
依赖注入
你可能会看到以上代码
var rootRef = new Firebase('https://fire-gochat.firebaseio.com');，
有两个隐患，第一它直接使用了魔鬼字符串，作为值传入到构造函数中，因为字符串可能会变，如果我们填写错误，会造成很大问题。第二个是这行代码使用了new创建Firebase，而Angular提倡依赖注入方式，所以也不够好。app.js代码修改如下:
angular
.module('app', ['ngRoute', 'firebase'])
.constant('FirebaseUrl', 'https://fire-gochat.firebaseio.com') //声明常量
.service('rootRef', ['FirebaseUrl', Firebase])//构造Firebase引用
.service('messages', Messages)//创建一个处理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来获得相应字段内容，数据在Firebase云端有更新时，会去更新Firebase对象，然后触发Angular的digest机制，digest会检查所有变化，然后更新视图
Firebase数组
有了上面的基础，再来使用Firebase数组就很简单了，在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中把内容都打印出来
<ul>
<li ng-repeat="msg in ctrl.messages">
{{ msg.name }}
</li>
</ul>
代码地址：https://github.com/CPPAlien/AngularFireExample
相关视频：https://www.youtube.com/watch?v=XDuL3yYMC44
