使用 AVOS Cloud JavaScript SDK 和 AngularJS 创建 一个 Tod

摘要：注意并不是一个的值组合，比如有方法，所以不能这样获取属性。需要创建一个自己的应用，并在初始化的时候替换掉里的。关于通知发生变化除了通过，还可以借助或者。

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 或者 $promise。

var defer = $q.defer();
        var query = new AV.Query(Todo);
        query.find({
          success : function(results) {
            defer.resolve(results);
          },
          error : function(aError) {
            defer.reject(aError);
          }
        });

        return defer.promise;

结合 AVOS Cloud JS SDK 和 AngularJS 可以实现 MEAN 的全栈开发。其中 M(Mongo) E(Express) N(node) 由 AVOS Cloud 完成。