發表文章

目前顯示的是 3月, 2014的文章

AngularJS + Google Spreadsheet

圖片
概要 這篇文章主要是說明如何寫 AngularJS 的 service,以類似 $resource REST 的方式來取得 Google 試算表的資料。 本文假設讀者已讀過 AngularJS Tutorial ,了解 AngularJS 基本概念。 目錄 建立試算表 Template App Module Service Controller 注意事項 參考 建立試算表 前往 https://drive.google.com 或是參考已經建立好的 試算表 。 先建立一份新的試算表: 建立 > 試算表 。 填寫資料表,以 AngularJS Tutorial 的 phones.json 為例。 將試算表權限公開: 檔案 > 共用 > 擁有存取權的使用者 > 變更 。 共用設定 > 公開在網路上 > 存取權 > 可檢視 > 儲存 。 權限公開後,發佈到網路: 檔案 > 發佈到網路 > 內容有所變更時自動更新發佈 > 開始發佈 。 發佈完成後,公開連結中會提供一組 key,可以前往 Google Data APIs 測試看看資料是否回傳正確。 接下來進入正式寫程式的階段,這裡我們會使用到 Tabletop.js 這個第三方的 library,提供 javascript 快速取得 json 格式的試算表資料。 這裡會以 AngularJS Tutorial 的 phonecatApp 為例子,說明如何實作 Tabletop.js 的 service。 Template 建立 index.html ,並加入 angular.js , angular-route.js 和 tabletop.js 。 index.html : <!doctype html> <html ng-app="phonecatApp"> ... <div ng-view></div> ... <script src="angular.js"></script> <