針對資料模型「文件」中的每項文件新增中繼資料每個項目都包含檔案圖示、可在網路上開啟檔案的連結和上次更新時間。
接下來,我們需要告知 Angular 的控制器會監督這個範本的轉譯情形。為此,我們使用 ngController 指令來指示 DocsController
重新執行範本:
<body data-ng-controller="DocsController">
<section id="main">
<ul>
<li data-ng-repeat="doc in docs">
<img data-ng-src=""> <a href=""></a>
<span class="date"></span>
</li>
</ul>
</section>
</body>
請注意,您在這裡看不到的內容,是連結事件監聽器或資料繫結屬性。Angular 幫我們處理大量事務!
最後一步是讓 Angular 亮起範本。典型的做法是一路加入 ngApp 指令,因為...
<html data-ng-app="gDriveApp">
如有需要,也可以將應用程式的範圍縮小至頁面的較小部分。這個應用程式中只有一個控制器,但如果之後想新增更多控制器,請將 ngApp 置於最上層的元素上,可讓整個頁面支援 Angular 服務。
main.html
的最終產品如下所示:
<html data-ng-app="gDriveApp">
<head>
…
<base target="_blank">
</head>
<body data-ng-controller="DocsController">
<section id="main">
<nav>
<h2>Google Drive Uploader</h2>
<button class="btn" data-ng-click="fetchDocs()">Refresh</button>
<button class="btn" id="close-button" title="Close"></button>
</nav>
<ul>
<li data-ng-repeat="doc in docs">
<img data-ng-src=""> <a href=""></a>
<span class="date"></span>
</li>
</ul>
</section>
內容安全政策簡介
與許多其他 JS MVC 架構不同,Angular 1.1.0 以上版本不需要經過調整,就能在嚴格 CSP 中運作。一開箱就能用!
不過,如果您使用的是 v1.0.1 和 v1.1.0 之間的舊版 Angular,就必須指示 Angular 在「內容安全模式」中執行。方法是將 ngCsp 指令與 ngApp 一起加入:
<html data-ng-app data-ng-csp>
處理授權
資料模型並非由應用程式本身產生。而是透過外部 API (Google Drive API) 填入。因此,為了填入應用程式資料,您需要進行一些工作。
我們必須針對使用者的 Google 帳戶擷取 OAuth 權杖,才能提出 API 要求。因此,我們建立了一個方法納入 chrome.identity.getAuthToken()
的呼叫並儲存 accessToken
,這個方式可以重複用於日後對 Drive API 的呼叫。
GDocs.prototype.auth = function(opt_callback) {
try {
chrome.identity.getAuthToken({interactive: false}, function(token) {
if (token) {
this.accessToken = token;
opt_callback && opt_callback();
}
}.bind(this));
} catch(e) {
console.log(e);
}
};
取得權杖後,就可以針對 Drive API 提出要求並填入模型。
骷髏控制器
上傳者的「模型」是物件的簡易陣列 (稱為「文件」),經過算繪後
:
var gDriveApp = angular.module('gDriveApp', []);
gDriveApp.factory('gdocs', function() {
var gdocs = new GDocs();
return gdocs;
});
function DocsController($scope, $http, gdocs) {
$scope.docs = [];
$scope.fetchDocs = function() {
...
};
// Invoke on ctor call. Fetch docs after we have the oauth token.
gdocs.auth(function() {
$scope.fetchDocs();
});
}
請注意,gdocs.auth()
是 DocumentController 建構函式的一部分。當 Angular 的內部建立控制器時,我們就知道在等待使用者有新的 OAuth 權杖。
正在擷取資料
範本已建立。控制器鷹架。取得 OAuth 權杖以下提供一些入門指南
現在可以定義主要控制器方法 fetchDocs()
。這就是控制器的工作群,負責請求使用者的檔案,並以 API 回應的資料提交文件陣列。
$scope.fetchDocs = function() {
$scope.docs = []; // First, clear out any old results
// Response handler that doesn't cache file icons.
var successCallback = function(resp, status, headers, config) {
var docs = [];
var totalEntries = resp.feed.entry.length;
resp.feed.entry.forEach(function(entry, i) {
var doc = {
title: entry.title.$t,
updatedDate: Util.formatDate(entry.updated.$t),
updatedDateFull: entry.updated.$t,
icon: gdocs.getLink(entry.link,
'http://schemas.google.com/docs/2007#icon').href,
alternateLink: gdocs.getLink(entry.link, 'alternate').href,
size: entry.docs$size ? '( ' + entry.docs$size.$t + ' bytes)' : null
};
$scope.docs.push(doc);
// Only sort when last entry is seen.
if (totalEntries - 1 == i) {
$scope.docs.sort(Util.sortByDate);
}
});
};
var config = {
params: {'alt': 'json'},
headers: {
'Authorization': 'Bearer ' + gdocs.accessToken,
'GData-Version': '3.0'
}
};
$http.get(gdocs.DOCLIST_FEED, config).success(successCallback);
};
fetchDocs()
會使用 Angular 的 $http
服務,透過 XHR 擷取主要動態饋給。OAuth 存取權杖會以及其他自訂標頭和參數包含在 Authorization
標頭中。
successCallback
會處理 API 回應,並為動態饋給中的每個項目建立新的文件物件。
如果您現在執行 fetchDocs()
,一切就緒,並顯示檔案清單:
![Google 雲端硬碟上傳工具已擷取檔案清單](https://developer.chrome.com/static/docs/apps/angular_framework/image/fetched-list-files-goog-25e168b8d229.png?authuser=6&hl=zh-tw)
讚!
等等,我們缺少這些精巧的檔案圖示。What gives? 快速檢查主控台後,顯示許多 CSP 相關錯誤:
![Developer Console 中的 CSP 錯誤](https://developer.chrome.com/static/docs/apps/angular_framework/image/csp-errors-developer-con-ccb3206c16431.png?authuser=6&hl=zh-tw)
原因在於我們嘗試將圖示 img.src
設為外部網址,此舉違反了 CSP。例如:https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png
。如要修正這個問題,我們需要將這些遠端資產提取至應用程式。
匯入遠端圖片素材資源
為了讓 CSP 停止在我們大吼,我們會使用 XHR2 將檔案圖示「匯入」為 Blob,然後將 img.src
設為應用程式建立的 blob: URL
。
以下是含有新增 XHR 程式碼的新版 successCallback
:
var successCallback = function(resp, status, headers, config) {
var docs = [];
var totalEntries = resp.feed.entry.length;
resp.feed.entry.forEach(function(entry, i) {
var doc = {
...
};
$http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
console.log('Fetched icon via XHR');
blob.name = doc.iconFilename; // Add icon filename to blob.
writeFile(blob); // Write is async, but that's ok.
doc.icon = window.URL.createObjectURL(blob);
$scope.docs.push(doc);
// Only sort when last entry is seen.
if (totalEntries - 1 == i) {
$scope.docs.sort(Util.sortByDate);
}
});
});
};
現在 CSP 對我們很滿意,因此我們獲得了良好的檔案圖示:
![含有檔案圖示的 Google 雲端硬碟上傳工具](https://developer.chrome.com/static/docs/apps/angular_framework/image/google-drive-uploader-fi-53d87d2ef23d1.png?authuser=6&hl=zh-tw)
離線:快取外部資源
需要進行的明顯最佳化:不要在每次呼叫 fetchDocs()
時,為每個檔案圖示發出 100 秒的 XHR 要求。在開發人員工具控制台中,按下「重新整理」按鈕數次以進行驗證。每次都會擷取 n 張圖片:
![控制台記錄 65:透過 XHR 擷取的圖示](https://developer.chrome.com/static/docs/apps/angular_framework/image/console-log-65-fetched-i-d4b9a39a1606.png?authuser=6&hl=zh-tw)
現在,我們可以修改 successCallback
來新增快取層。新增的內容會以粗體強調:
$scope.fetchDocs = function() {
...
// Response handler that caches file icons in the filesystem API.
var successCallbackWithFsCaching = function(resp, status, headers, config) {
var docs = [];
var totalEntries = resp.feed.entry.length;
resp.feed.entry.forEach(function(entry, i) {
var doc = {
...
};
// 'https://ssl.gstatic.com/doc_icon_128.png' -> 'doc_icon_128.png'
doc.iconFilename = doc.icon.substring(doc.icon.lastIndexOf('/') + 1);
// If file exists, it we'll get back a FileEntry for the filesystem URL.
// Otherwise, the error callback will fire and we need to XHR it in and
// write it to the FS.
var fsURL = fs.root.toURL() + FOLDERNAME + '/' + doc.iconFilename;
window.webkitResolveLocalFileSystemURL(fsURL, function(entry) {
doc.icon = entry.toURL(); // should be === to fsURL, but whatevs.
$scope.docs.push(doc); // add doc to model.
// Only want to sort and call $apply() when we have all entries.
if (totalEntries - 1 == i) {
$scope.docs.sort(Util.sortByDate);
$scope.$apply(function($scope) {}); // Inform angular that we made changes.
}
}, function(e) {
// Error: file doesn't exist yet. XHR it in and write it to the FS.
$http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
console.log('Fetched icon via XHR');
blob.name = doc.iconFilename; // Add icon filename to blob.
writeFile(blob); // Write is async, but that's ok.
doc.icon = window.URL.createObjectURL(blob);
$scope.docs.push(doc);
// Only sort when last entry is seen.
if (totalEntries - 1 == i) {
$scope.docs.sort(Util.sortByDate);
}
});
});
});
};
var config = {
...
};
$http.get(gdocs.DOCLIST_FEED, config).success(successCallbackWithFsCaching);
};
請注意,在 webkitResolveLocalFileSystemURL()
回呼中,當看見最後一個項目時,就會呼叫 $scope.$apply()
。通常不需要呼叫 $apply()
。Angular 會自動偵測資料模型的變更但在本範例中,我們有一個額外的非同步回呼層,原因是 Angular 不知道。當模型更新時,我們必須明確告知 Angular。
首次執行時,圖示不會出現在 HTML5 檔案系統中,對 window.webkitResolveLocalFileSystemURL()
的呼叫會導致系統叫用其錯誤回呼。為此,我們可以重複使用之前的技術,並擷取圖片。這次的唯一差別是每個 blob 都會寫入檔案系統 (請參閱 writeFile())。主控台會驗證此行為:
![控制台記錄 100:寫入完成](https://developer.chrome.com/static/docs/apps/angular_framework/image/console-log-100-write-co-c822043d97228.png?authuser=6&hl=zh-tw)
下次執行時 (或按下「Refresh」按鈕) 時,傳遞至 webkitResolveLocalFileSystemURL()
的網址就會存在,因為檔案先前已快取過。應用程式會將 doc.icon
設為檔案的 filesystem: URL
,並避免為圖示產生昂貴的 XHR。
拖曳上傳
如果無法上傳檔案,上傳程式應用程式將顯示不實廣告!
app.js 會根據名為 DnDFileController
的 HTML5 拖曳功能實作小型程式庫,藉此處理這項功能。從桌面拖曳檔案並上傳到 Google 雲端硬碟。
只要將這個指令新增至 gdocs 服務,即可執行以下操作:
gDriveApp.factory('gdocs', function() {
var gdocs = new GDocs();
var dnd = new DnDFileController('body', function(files) {
var $scope = angular.element(this).scope();
Util.toArray(files).forEach(function(file, i) {
gdocs.upload(file, function() {
$scope.fetchDocs();
});
});
});
return gdocs;
});