为何挑选这两个库做 Todo

AVOS Cloud JavaScript SDK 担任把数据存储在服务器，供应了 数据查询，保留，更新等经常运用操纵的要领。AngularJS 关于增编削查范例的运用场景异常适宜。这块重要用到了 AngularJS的 模板和绑定方面的特征。

Step By Step 入门

这里重要说下 AVOS cloud Javascript SDK 与 AngularJS 连系运用的部份

初始化 AVOS Cloud JavaScript SDK

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 须要的数据格式。

查询 Todo 列表

        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。

关于 AV Object 数据与 Angular的转化。

除了经由过程JSON体式格局，还能够用

Object.defineProperty(Todo.prototype, "title", {
      get: function() {
        return this.get("text");
      },
      set: function(aValue) {
        this.set("text", aValue);
      }
    });

如许能够在 html 里直接经由过程 {{todo.text}} 接见。

关于关照 Angular 发生变化

除了经由过程 $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 完成。