AngularJS + Google Spreadsheet

Amo Wu 3月 10, 2014

概要

這篇文章主要是說明如何寫 AngularJS 的 service，以類似 $resource REST 的方式來取得 Google 試算表的資料。

本文假設讀者已讀過 AngularJS Tutorial，了解 AngularJS 基本概念。

建立試算表

前往 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>
    <script src="angular-route.js"></script>
    <script src="tabletop.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
...

app.js，controller.js 和 services.js 後面會說明，接下來先加入 phone-list.html。
partials/phone-list.html:

<div>
  <ul>
    <li ng-repeat="phone in phones">
      <img ng-src="{{phone.imageurl}}">
      <p>{{phone.name}}</p>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
</div>

phone-list.html 綁定了 name，snippet 和 imageurl 三個變數，對應試算表的欄位名稱。

App Module

接著使用 angular-route.js 提供的 ngRoute 來幫 app 設定路由，這裡先一律導向 /phones。
js/app.js:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatServices',
  'phonecatControllers'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

接下來要開始寫 phonecatServices 和 phonecatControllers。

Service

這裡將 tabletop.js 封裝成一個 Phone 的 service，並自訂一個 query 方法提供試算表查詢使用。
js/services.js:

var phonecatServices = angular.module('phonecatServices', []);

phonecatServices.factory('Phone', ['$rootScope',
  function($rootScope) {
    return {
      query: function(callback) {
        Tabletop.init({
          key: 'YOUR_KEY',
          simpleSheet: true,
          parseNumbers: true,
          callback: function(data, tabletop) {
            if(callback && typeof(callback) === "function") {
              $rootScope.$apply(function() {
                callback(data);
              });
            }
          }
        });
      }
    }
  }]);

key 的部分記得填寫試算表提供的 key。

Controller

最後剩下 phonecatControllers，使用 Phone.query 取得試算表的 json 格式資料。
js/controllers.js:

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    Phone.query(function(data) {
      $scope.phones = data;
    });
  }]);

...

完成，完整範例程式碼請參考 GitHub angular-spreadsheet-sample。

注意事項

新版 Google 試算表不支援。
試算表欄位名稱只能小寫，例如：imgUrl，要改成 imgurl。

搜尋此網誌

Amo Wu's Blog