AngularJS + Google Spreadsheet

概要

這篇文章主要是說明如何寫 AngularJS 的 service,以類似 $resource REST 的方式來取得 Google 試算表的資料。
本文假設讀者已讀過 AngularJS Tutorial,了解 AngularJS 基本概念。

目錄

  1. 建立試算表
  2. Template
  3. App Module
  4. Service
  5. Controller
  6. 注意事項
  7. 參考

建立試算表

前往 https://drive.google.com 或是參考已經建立好的試算表
先建立一份新的試算表:建立 > 試算表

填寫資料表,以 AngularJS Tutorialphones.json 為例。

將試算表權限公開:檔案 > 共用 > 擁有存取權的使用者 > 變更

共用設定 > 公開在網路上 > 存取權 > 可檢視 > 儲存

權限公開後,發佈到網路:檔案 > 發佈到網路 > 內容有所變更時自動更新發佈 > 開始發佈

發佈完成後,公開連結中會提供一組 key,可以前往 Google Data APIs 測試看看資料是否回傳正確。

接下來進入正式寫程式的階段,這裡我們會使用到 Tabletop.js 這個第三方的 library,提供 javascript 快速取得 json 格式的試算表資料。
這裡會以 AngularJS TutorialphonecatApp 為例子,說明如何實作 Tabletop.js 的 service。

Template

建立 index.html,並加入 angular.jsangular-route.jstabletop.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.jscontroller.jsservices.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 綁定了 namesnippetimageurl 三個變數,對應試算表的欄位名稱。

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'
      });
  }]);
接下來要開始寫 phonecatServicesphonecatControllers

Service

這裡將 tabletop.js 封裝成一個 Phoneservice,並自訂一個 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

參考



這個網誌中的熱門文章

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

Factory pattern 工廠模式

swfobject - 網頁輕鬆嵌入Flash