wild-angular 是Wilddog对angularJS的官方支持库。野狗实时后端云 是支持数据存储，读写，身份认证的后端服务。
wild-angular 是对Wilddog客户端的补充，提供三个angular service
$wilddogObject- 同步Object$wilddogArray- 同步Array$wilddogAuth- 认证
在html中使用wild-angular:
<!-- AngularJS -->
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!-- Wilddog -->
<script src="https://cdn.wilddog.com/sdk/js/2.5.2/wilddog.js"></script>
<!-- Wild-Angular -->
<script src="https://cdn.wilddog.com/libs/wild-angular/0.0.2/wild-angular.min.js"></script>使用npm:
$ npm install wild-angular --save使用bower:
$ bower install wild-angular --save在我们通过依赖注入使用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数据节点也发生相应的改变。
如何设置三向数据绑定？我们使用前面介绍的$wilddogObjectservice来创建同步对象，然后调用$bindTo()来绑定到$scope的一个变量上。
app.js
var app = angular.module("sampleApp",['wilddog']);
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();
//将云端数据与本地变量同步
var syncObject = $wilddogObject(sync.ref('data'));
//将Wilddog绑定到$scope.data，当本地model发生变化，Wilddog数据库也同步变化。
syncObject.$bindTo($scope,"data");
})index.html
<html ng-app="sampleApp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.wilddog.com/sdk/js/2.5.2/wilddog.js"></script>
<script src="https://cdn.wilddog.com/libs/wild-angular/1.0.0/wild-angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<!-- 这里输入的任何数据都会同步给Wilddog数据库 -->
<input type="text" ng-model="data.text"/>
<!-- Wilddog数据库中的任何内容都会同步到这里 -->
<h1>You said: {{ data.text }}</h1>
</body>
</html>三向数据绑定对于简单的key-value数据非常好用。但是，很多时候我们需要使用列表。这时我们需要使用$wilddogArrayservice
我们先看看只读的方式，从Wilddog数据库中把一个列表下载到$scope的一个对象中
app.js
var app = angular.module("sampleApp", ["wilddog"]);
app.controller("SampleCtrl", function($scope, $wilddogArray) {
var config = {
authDomain: "<appId>.wilddog.com",
syncURL: "https://<appId>.wilddogio.com"
};
wilddog.initializeApp(config);
var auth = wilddog.auth();
var sync = wilddog.sync();
// 创建一个同步数组
$scope.messages = $wilddogArray(sync.ref('messages'));
});index.html
<html ng-app="sampleApp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.wilddog.com/sdk/js/2.5.2/wilddog.js"></script>
<script src="https://cdn.wilddog.com/libs/wild-angular/1.0.0/wild-angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<ul>
<li ng-repeat="message in messages">{{ message.text }}</li>
</ul>
</body>
</html>
上面的例子只能满足只读的需求，Wilddog数据库修改，页面会保持同步，而如果页面中的数据发生了修改，将不会通知到Wilddog数据库。
那么，wild-angular提供了一组方法来完成同步数组的需求:$add(),$(save),$(remove)
app.js
var app = angular.module("sampleApp", ["wilddog"]);
app.controller("SampleCtrl", function($scope, $wilddogArray) {
var config = {
syncURL: "https://<appId>.wilddogio.com"
};
wilddog.initializeApp(config);
var sync = wilddog.sync();
// 创建一个同步数组
$scope.messages = $wilddogArray(sync.ref('messages'));
// 把新数据添加到列表中
// 这条数据会自动同步到wilddog数据库
$scope.addMessage = function() {
$scope.messages.$add({
text: $scope.newMessageText
});
};
});index.html
<html ng-app="sampleApp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.wilddog.com/sdk/js/current/wilddog.js"></script>
<script src="https://cdn.wilddog.com/libs/wild-angular/1.0.0/wild-angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<ul>
<li ng-repeat="message in messages">
<!-- edit a message -->
<input ng-model="message.text" ng-change="messages.$save(message)" />
<!-- delete a message -->
<button ng-click="messages.$remove(message)">删除消息</button>
</li>
</ul>
<!-- push a new message onto the array -->
<form ng-submit="addMessage()">
<input ng-model="newMessageText" />
<button type="submit">新增消息</button>
</form>
</body>
</html>
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);
});
});
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