第四章：AngularFire

简介

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模板中使用即可。

代码 本次例子Firebase数据库内容

完成以上代码后，我们需要搭建一个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