Xây dựng ứng dụng bằng AngularJS

Hướng dẫn này giúp bạn bắt đầu tạo Ứng dụng Chrome bằng khung MVC AngularJS. Người nhận minh hoạ cách Angular hoạt động, chúng ta sẽ tham chiếu đến một ứng dụng thực tế được xây dựng bằng khung này, Trình tải lên của Google Drive. Mã nguồn này có trên GitHub.

Giới thiệu về ứng dụng

Trình tải lên của Google Drive

Trình tải lên của Google Drive cho phép người dùng xem và tương tác nhanh với các tệp được lưu trữ trong Google Drive cũng như tải tệp mới lên bằng cách sử dụng API Kéo và thả HTML. Đó là ví dụ hay về cách tạo một ứng dụng giao tiếp với một trong các API của Google; trong trường hợp này, gói thuê bao Google API Drive.

Trình tải lên sử dụng OAuth2 để truy cập dữ liệu của người dùng. API chrome.identity xử lý việc tìm nạp Mã thông báo OAuth cho người dùng đã đăng nhập, vì vậy, chúng tôi đã hoàn tất công việc khó khăn! Khi có khoảng thời gian mã truy cập, các ứng dụng sẽ dùng API Google Drive để truy cập vào dữ liệu của người dùng.

Các tính năng chính mà ứng dụng này sử dụng:

  • Tính năng tự động phát hiện của AngularJS cho CSP
  • Kết xuất danh sách các tệp được tìm nạp từ API Google Drive
  • API hệ thống tệp HTML5 để lưu trữ các biểu tượng tệp khi không có mạng
  • Kéo và thả HTML5 để nhập/tải tệp mới lên từ màn hình
  • XHR2 để tải hình ảnh, trên nhiều miền
  • API chrome.identity để uỷ quyền OAuth
  • Khung không Chrome giúp xác định giao diện thanh điều hướng riêng của ứng dụng

Tạo tệp kê khai

Tất cả ứng dụng Chrome đều cần có tệp manifest.json chứa thông tin mà Chrome cần để khởi chạy ứng dụng. Tệp kê khai chứa siêu dữ liệu có liên quan và liệt kê mọi quyền đặc biệt mà ứng dụng cần chạy.

Phiên bản rút gọn của tệp kê khai của Người tải lên sẽ có dạng như sau:

{
  "name": "Google Drive Uploader",
  "version": "0.0.1",
  "manifest_version": 2,
  "oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  },
 ...
  "permissions": [
    "https://docs.google.com/feeds/",
    "https://docs.googleusercontent.com/",
    "https://spreadsheets.google.com/feeds/",
    "https://ssl.gstatic.com/",
    "https://www.googleapis.com/"
  ]
}

Các phần quan trọng nhất của tệp kê khai này là "oauth2" và "quyền" .

" OAuth2" xác định các tham số cần thiết bằng OAuth2 để thực hiện điều kỳ diệu của nó. Để tạo một "client_id", làm theo hướng dẫn trong bài viết Lấy mã ứng dụng khách của bạn. "Phạm vi" liệt kê các phạm vi uỷ quyền mà mã thông báo OAuth sẽ có hiệu lực (ví dụ: các API mà ứng dụng muốn truy cập).

"Quyền" bao gồm các URL mà ứng dụng sẽ truy cập qua XHR2. Các tiền tố URL là bắt buộc để Chrome biết được cần cho phép yêu cầu giữa nhiều miền nào.

Tạo trang sự kiện

Tất cả ứng dụng Chrome đều yêu cầu tập lệnh/trang nền để khởi chạy ứng dụng và phản hồi các sự kiện hệ thống.

Trong tập lệnh background.js, Trình tải lên của Drive sẽ mở cửa sổ 500x600px dẫn đến trang chính. Điều này cũng chỉ định chiều cao và chiều rộng tối thiểu cho cửa sổ để nội dung không bị quá méo:

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create('../main.html', {
    id: "GDriveExample",
    bounds: {
      width: 500,
      height: 600
    },
    minWidth: 500,
    minHeight: 600,
    frame: 'none'
  });
});

Cửa sổ này được tạo dưới dạng cửa sổ không có Chrome (khung: "none"). Theo mặc định, cửa sổ hiển thị với Thanh đóng/mở rộng/thu nhỏ mặc định của hệ điều hành:

Trình tải lên của Google Drive không có khung

Trình tải lên sử dụng frame: 'none' để hiển thị cửa sổ dưới dạng "phương tiện chặn trống" và tạo một chốt giao dịch tuỳ chỉnh trong main.html:

Trình tải lên của Google Drive với khung tuỳ chỉnh

Toàn bộ khu vực điều hướng được bọc trong một