AVOS Cloud JavaScript SDK 负责把数据存储在服务器,提供了 数据查询,保存,更新等常用操作的方法。AngularJS 对于增删改查类型的应用场景非常合适。这块主要用到了 AngularJS的 模板和绑定方面的特性。
这里主要说下 AVOS cloud Javascript SDK 与 AngularJS 结合使用的部分
AV.initialize("your app id", "your app key");
既然是与 AngularJS,这里可以有更优雅的写法,对于angular 来说初始化可以放在 模块初始化的配置里面。
var module = angular.module("todoMod",[]);
module.run(function() {
AV.initialize("your app id", "your app key");
});
var Todo = AV.Object.extend("Todo");
var todo = new Todo();
todo.set("text",$scope.newTodo.text);
todo.set("done",$scope.newTodo.done)
todo.save(null, {
success: function(result){
$scope.$apply(function(){//使 angular 知道数据发生了变化
$scope.todos.push(todo.toJSON());
});
}
});
我们知道一个 AngularJs 的model是一个 plain JavaScript Object,对于 AV Object, 需要用 set 来设置属性。注意 AV Object并不是一个 key,value的值组合,比如有 todo.save()方法,所以不能 todo[prop] 这样获取属性。需要走setter,getter方式。还有其他更优雅的结合方式 下面再说。
这里还有一点需要注意,就是 $scope.$apply 这一行,因为数据的保存请求是通过AV Object 进行的,所以angular 并不知道发送了什么,需要告知angular todo数据发生了变化。
todo.toJSON() , todo 是一个 AVObject 类型实例,需要转换成 angular 需要的数据格式。
var Todo = AV.Object.extend("Todo");
var query = new AV.Query(Todo);
query.find({
success:function (results){
$scope.$apply(function(){
$scope.todos = JSON.parse(JSON.stringify(results));
})
}
})
这里需要注意 JSON.parse(JSON.stringify(results)) , results 是一个普通的 js Array,但里面的元素都是 AVObject 类型的实例,需要转化成 angular需要的数据格式。
查看源码 ,下载下来直接打开 index.html 就可以看到效果了。
通过 AVOS Cloud 数据管理平台查看,管理数据。需要创建一个自己的 应用 ,并在初始化的时候 替换掉 AV.initialize 里的 AppId AppKey 。
除了通过 JSON 方式,还可以用
Object.defineProperty(Todo.prototype, "title", {
get: function() {
return this.get("text");
},
set: function(aValue) {
this.set("text", aValue);
}
});
这样可以在 html 里直接通过 {{todo.text}} 访问。
除了通过 $scope.$apply ,还可以借助 $timeout 或者 $q 来让 Angular 感知到变化。
var query = new AV.Query(Todo);
$q.when(query.find()).then(function(todos) {
$scope.todos = JSON.parse(JSON.stringify(results));
}, function(error) {
// deal with error
});
结合 AVOS Cloud JS SDK 和 AngularJS 可以实现 MEAN 的全栈开发。其中 M(Mongo) E(Express) N(node) 由 AVOS Cloud 完成。