使用 AVOS Cloud JavaScript SDK 和 AngularJS 建立 一個 Todo Demo

爲何選擇這兩個庫作 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 完成。