lib-js-wildangular
wild-angular 是Wilddog对angularJS的官方支持库。野狗实时后端云 是支持数据存储,读写,身份认证的后端服务。
wild-angular 是对Wilddog客户端的补充,提供三个angular service
$wilddogObject
- 同步Object$wilddogArray
- 同步Array$wilddogAuth
- 认证
quickStart
引入依赖
在html中使用wild-angular:
<!-- AngularJS --> <!-- Wilddog --> <!-- Wild-Angular -->
使用npm:
$ npm install wild-angular --save
使用bower:
$ bower install wild-angular --save
注入lib-js-wildangular服务
在我们通过依赖注入使用wild-angular之前,我们需要注册一个wilddog
模块
var app = angular.module("sampleApp",["wilddog"]);
现在 $wilddogObject
,$wilddogArray
,$wilddogAuth
Service 可以被注入到任何,controller,service 或factory。
app.controller("SampleCtrl",function($scope,$wilddogObject){
var config = {
authDomain: "<appId>.wilddog.com",
syncURL: "https://<appId>.wilddogio.com/"
};
wilddog.initializeApp(config);
var auth = wilddog.auth();
var sync = wilddog.sync();
//将数据下载到一个本地对象
$scope.data = $wilddogObject(sync.ref());
//在这里打印数据会得到空值
});
在上面的例子中,$scope.data
将会与服务器同步 。
三向数据对象绑定
Angular被大家熟知的是它的双向数据绑定特性。Wilddog是一个轻量的实时数据库。wild-angular可以将两者完美的结合在一起,DOM,javascript和Wilddog数据库三者之间实时同步。DOM发生改变,相应的model发生改变,与这个model绑定的Wilddog数据节点也发生相应的改变。
如何设置三向数据绑定?我们使用前面介绍的$wilddogObject
service来创建同步对象,然后调用$bindTo()
来绑定到$scope
的一个变量上。
app.js
var app = angular;app
index.html
<!-- 这里输入的任何数据都会同步给Wilddog数据库 --><!-- Wilddog数据库中的任何内容都会同步到这里 -->You said: {{ data.text }}
同步数组
三向数据绑定对于简单的key-value数据非常好用。但是,很多时候我们需要使用列表。这时我们需要使用$wilddogArray
service
我们先看看只读的方式,从Wilddog数据库中把一个列表下载到$scope
的一个对象中
app.js
var app = angular;app;
index.html
{{ message.text }}
上面的例子只能满足只读的需求,Wilddog数据库修改,页面会保持同步,而如果页面中的数据发生了修改,将不会通知到Wilddog数据库。
那么,wild-angular提供了一组方法来完成同步数组的需求:$add()
,$(save)
,$(remove)
app.js
var app = angular;app;
index.html
<!-- edit a message --><!-- delete a message -->删除消息<!-- push a new message onto the array -->新增消息
终端用户认证
Wilddog 提供了一列登录认证的方式,支持匿名,email,微博,微信,QQ登录
wild-angular提供了一个service $wilddogAuth
,封装了Wilddog提供的登录认证的方式。能够注入到任何 controller,service和factory。
app.controller("SampleCtrl", function($scope, $wilddogAuth) {
var config = {
authDomain: "<appId>.wilddog.com",
};
wilddog.initializeApp(config);
var auth = $wilddogAuth(wilddog.auth());
// 通过weixin登录
auth.$authWithOAuthPopup("weixin").then(function(authData) {
console.log("uid : ", authData.uid);
}).catch(function(error) {
console.log("登录失败:", error);
});
});
API
Guide
Contributing
TBD
$ git clone https://github.com/WildDogTeam/lib-js-wildangular.git$ cd lib-js-wildangular $ npm install -g grunt-cli $ npm install $ grunt install $ grunt watch