AngularFire入门
发布在用Angular开发web应用2014年3月13日view:8019
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

AngularFire入门

AngularFire是AngularJS专门针对于Firebase开发的一个模块。通过使用AngularFire,你可以把Firebase URLs和AngularJS的模型联系起来以便他们能够通过Firebase的服务器让所有使用你的应用的客户端保持同步。

开始使用AngularFire

要使用AngularFire,我们需要在页面中包含两个JavaScript文件,一个用于引入Firebase,另一个用来引入AngularFire。你可以通过Firebase的CDN来获取它们,如下所示:

 <script src="https://cdn.firebase.com/js/client/1.0.5/firebase.js"></script>
 <script src="https://cdn.firebase.com/libs/angularfire/0.7.0/angularfire.js"></script>   

如果你想要使用简单的登录功能,腻害需要将下面的简单登录库包含如页面中:

    <script src="https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js"></script>

特定版本的AngularFire需要特定版本的Firebase和简单登录库,下面的列表说明了它们之间的对应关系:

图1

接下来,你需要将Firebase模块作为依赖模块添加到你的Angular应用中。

var myapp = angular.module("myapp",["firebase"]);  

$firebase

你现在就能够获取$firebase的服务,你现在可以将它作为一个依赖包含进你的控制器或者服务中:

myapp.controller("MyController", ["$scope", "$firebase",
    function($scope, $firebase) {}
    ]);

构造器函数

$firebase服务只接受一个参数:一个Firebase的引用。要注意的是如果你只想要同步数据的一个子集,那么你可能会使用到查询或限制。

由$firebase返回的对象将会自动与远端的Firebase数据保持同步。但是要注意的是发生在这个对象上的任何变化都不会自动导致远端数据的变化。你需要在这个对象上使用一个带有’$’前缀的方法。

这个服务总是会返回一个对象(它永远不会是一个数组或者一个原始变量)。如果Firebase引用指向一个原始数值,它将被包裹在一个对象中,这个对象有一个叫做$value的键来包含这个原始数值。如果这个引用指向一个数组,你将获得一个对象,在这个对象中这个数组对象的键。如果你想要的是一个通过优先值进行排序的原生数组,你可以使用orderByPriority。

myapp.controller("MyController", ["$scope", "$firebase",
function($scope, $firebase) {
 $scope.items = $firebase(new Firebase(URL));
}
]);

$add(value)

$add方法接收一个任何类型的参数。它会把这个值追加为一个列表的成员(这个列表通过时间先后进行排序)。这等价于在一个Firebase引用上调用push(value)方法。

$scope.items.$add({foo:"bar"});  

这个方法将返回一个promise,当数据被存储在服务器上时它将会被fulfilled。这个promise将会和一个Firebase的引用一起被解析,你可以从其中获取最新添加数据的键的名称:

        $scope.items.$add({baz: "boo"}).then(function(ref) {
         ref.name();                // 添加数据的键名称         });

$remove([key])

$remove方法接收一个可选参数 – 一个键。如果提供了这个键,这个方法将会移除这个键指向的子数据。如果没有提供这个键,那么整个远端对象都会被移除。

$scope.items.$remove("foo"); // 移除一个叫"foo"的子数据
$scope.items.$remove();      // 移除整个对象  

这个方法将会返回一个promise,当数据从服务器上被成功删除时,它将会被解析。

$save([key])

$save方法将会接收一个可选参数 – 一个键。如果这个键被提供,那么这个方法将会保存所有这个键指向Firebase对象中的数据。如果没有提供这个键,Firebase对象上发生的所有变化都会被保存。当我们要将本地的变化保存到Firebase服务器中时,这个方法常常被使用。

$scope.items.foo = "baz";
$scope.items.$save("foo");  // new Firebase(URL + "/foo") 弦子包含的是 "baz".  

这个方法将会返回一个promise,当远端数据被成功保存时,它将会被解析。

$child(key)

这个方法会创建一个新的$firebase对象来指向一个子引用。

        var child = $scope.items.$child('foo');  
        child.$remove(); //等价于 $scope.items.$remove("foo")

$set(value)

我们可以使用这个方法来将远端对象重写为新值。本地对象随后将会自动更新为新值。

$scope.items.$set({bar: "baz"});  // new Firebase(URL + "/foo") 现在是null。  

这个方法将返回一个promise,当远端数据被更新时,它会自动被解析。

$update(value)

这个方法不会重写对象,只会改变特定的值。

$scope.items.$set({foo: "bar", baz: "boo"});
$scope.items.$update({baz: "fizz"});  // 数据现在为{foo: "bar", baz: "fizz"}.  

这个方法将返回一个promise,当远端的数据被成功更新时,它将自动被解析。

$transaction(updateFn,[applyLocally])

$transaction方法被用来把已经存在的数据修改为新的值,并确保不会有其他客户端同时对数据进行修改引发的冲突。

$transaction接收一个updateFn变量,这个函数由开发者提供,并可以传递本地存放的数据(以一个JS对象的形式)。这个函数将会返回一个它将要写的新值(作为一个JS对象)。如果返回了undefined,transaction将会中止,本地的数据也不会被修改。

默认情况下,每次transaction中update函数运行时,都会有事件发生。因此如果它多次运行,你可能会看到一些中间状态。你可以将applyLocally参数设置为false来抑制这些中间状态,一直到transaction在事件发生之前结束为止。

这个方法将会返回一个promise,如果transaction中止,它将被解析为null,否则它将会被解析为本地新数据的一个快照。

$scope.messageCount = $firebase(new Firebase(URL + "/messageCount"));

// 每次增加1来增加消息
$scope.messageCount.$transaction(function(currentCount) {
    if (!currentCount) return 1;   // 初始化计数器
    if (currentCount < 0) return;  // 返回undefined来中止transaction
    return currentCount + 1;             // 将计数增加1}).then(function(snapshot) {
    if (!snapshot) {
        // 处理中止的情况
    } else {
        // 做点什么
    }
}, function(err) {
    // 处理错误情况
});  

getIndex()

返回在数据对象中的一个有序键值列表,通过Firebase优先级来排序。如果你在寻找一个快速的方法将这些项目转化为一个经过排序的列表,比如说在ng-repeat中,你需要看看orderByPriority过滤器。

var keys = $scope.items.$getIndex();
keys.forEach(function(key, i) {
  console.log(i, $scope.items[key]); // 按顺序输出Firebase中的每一个项目}); 

优先级

Firebase中,每个对象通过一个$priority字段来设置优先级。改变这个字段的值,然后调用$save方法将会改变Firebase中的优先级设置。

$scope.items.foo.$priority = 20;
$scope.items.$save("foo");  // new Firebase(URL + "foo")的优先级现在是20。 

事件

你可以在通过在$firebase返回的对象上调用$on方法来绑定时间处理器。

$(eventName,handler)

为一个特定的事件添加一个事件处理器。你可以绑定一些Firebase的常规事件(例如 child_added 以及 value,详情参看Firebase文档 ),以及两个额外的事件:

$scope.items.$on("loaded", function() {
  console.log("Initial data received!");
});
$scope.items.$on("change", function() {
  console.log("A remote change was applied locally!");
});  
  • loaded:这个事件只会被触发一次,当我们接收到来自Firebase的初始化数据时。
  • change:当每次被运用在本地对象上的数据变化发生在远端服务器上时,这个事件会被触发。

$off([eventName],[handler])

解绑一个特定的事件处理器。如果没有指明时间处理器,所有对于这个事件的回调函数都会被解绑。如果没有指定事件类型,整个$firebase实例的同步都会被关闭。

// 解绑所有'loaded'事件的处理器
$scope.items.$off('loaded');
// 完全停止'$scope.items'的同步性
function stopSync() {
  $scope.items.$off();
} 

三向数据绑定

你可以在$firebase返回的对象上调用$bind方法来建立自动三向数据绑定。

$bind($scope,model)

该方法在Firebase数据,一个ng-model以及DOM之间创建一个隐式的三项数据绑定。调用这个方法将会自动把本地发生的所有数据变化同步到Firebase中。一旦建立了一个三向数据绑定,你再也不需要显式的将数据保存在Firebase了(例如,使用$add或者$save)。

$scope.items.$bind($scope, "remoteItems");
$scope.remoteItems.bar = "foo";  // new Firebase(URL + "/bar") 现在是"foo"   

这个方法将返回一个promise,当接收到来自服务器的初始数据时,它会被解析。这个promise会和一个unbind函数一起被解析,当调用时,它它将会接触一个三向绑定。

$scope.items.$bind($scope, "remote").then(function(unbind) {
  unbind();
  $scope.remote.bar = "foo";    // 远端数据不再变化
  });  

排序的数据和数组

因为$firebase返回一个JavaScript对象,你可能想要通过使用orderByPriority过滤器将它转化成为一个数组 ,如果项目的顺序对于你来说很重要的话。

orderByPriority

orderByPriority过滤器由AngularFire提供,它将会把一个由$firebase返回的对象转化成为一个数组。这个数组中的对象通过优先级来排序(由Firebase决定)。另外,这个数组中的每一个对象都拥有一个$id属性,它会绑定到这个对象的名称上。

<ul ng-repeat="item in items | orderByPriority">
  <li>
    <input type="text" id="{{item.$id}}" ng-model="item.$priority"/>
    {{item.name}}
  </li>
</ul>

本文参考自AngularFire文档,原文地址https://www.firebase.com/docs/angular/reference.html

如果你觉得本文对你有帮助,请为我提供赞助 https://me.alipay.com/jabez128

评论
发表评论
3年前
添加了一枚【评注】:test good feature
4年前

可以加个群:285137623

4年前

腻害 改成“你还”

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
用Angular开发web应用

讲述Angular开发框架的基础知识,帮助读者快速学习并深入理解Angular的开发理念和具体应用方式

我的收藏