摘要:注意并不是一個的值組合,比如有方法,所以不能這樣獲取屬性。需要創建一個自己的應用,并在初始化的時候替換掉里的。關于通知發生變化除了通過,還可以借助或者。
為什么選擇這兩個庫做 Todo
AVOS Cloud JavaScript SDK 負責把數據存儲在服務器,提供了 數據查詢,保存,更新等常用操作的方法。AngularJS 對于增刪改查類型的應用場景非常合適。這塊主要用到了 AngularJS的 模板和綁定方面的特性。
Step By Step 入門這里主要說下 AVOS cloud Javascript SDK 與 AngularJS 結合使用的部分
初始化 AVOS Cloud JavaScript SDKAV.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 完成。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87565.html
閱讀 3333·2021-11-22 14:44
閱讀 2537·2019-08-30 14:10
閱讀 2589·2019-08-30 13:12
閱讀 1217·2019-08-29 18:36
閱讀 1341·2019-08-29 16:16
閱讀 3328·2019-08-26 10:33
閱讀 1761·2019-08-23 18:16
閱讀 379·2019-08-23 18:12