Bouw apps met AngularJS

Met deze handleiding kunt u aan de slag met het bouwen van Chrome-apps met het AngularJS MVC-framework. Om Angular in actie te illustreren, verwijzen we naar een daadwerkelijke app die is gebouwd met behulp van het raamwerk, de Google Drive Uploader. De broncode is beschikbaar op GitHub.

Over de app

Google Drive-uploader

Met de Google Drive Uploader kunnen gebruikers snel bestanden bekijken en gebruiken die zijn opgeslagen in hun Google Drive-account, en nieuwe bestanden uploaden met behulp van de HTML Drag and Drop API's . Het is een goed voorbeeld van het bouwen van een app die met een van de API's van Google praat; in dit geval de Google Drive API.

De Uploader gebruikt OAuth2 om toegang te krijgen tot de gegevens van de gebruiker. De chrome.identity API zorgt voor het ophalen van een OAuth-token voor de ingelogde gebruiker, dus het harde werk is voor ons gedaan! Zodra we een toegangstoken met een lange levensduur hebben, gebruiken de apps de Google Drive API om toegang te krijgen tot de gegevens van de gebruiker.

Belangrijkste functies die deze app gebruikt:

  • AngularJS's autodetectie voor CSP
  • Geef een lijst weer met bestanden die zijn opgehaald uit de Google Drive API
  • HTML5-bestandssysteem-API om bestandspictogrammen offline op te slaan
  • HTML5 Drag and Drop voor het importeren/uploaden van nieuwe bestanden vanaf het bureaublad
  • XHR2 om afbeeldingen te laden, cross-domein
  • chrome.identity API voor OAuth-autorisatie
  • Chromeloze frames om het uiterlijk van de navigatiebalk van de app te definiëren

Het manifest maken

Alle Chrome-apps vereisen een manifest.json bestand dat de informatie bevat die Chrome nodig heeft om de app te starten. Het manifest bevat relevante metagegevens en vermeldt eventuele speciale machtigingen die de app moet uitvoeren.

Een uitgeklede versie van het manifest van de Uploader ziet er als volgt uit:

{
  "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/"
  ]
}

De belangrijkste onderdelen van dit manifest zijn de secties 'oauth2' en 'permissions'.

De sectie "oauth2" definieert de vereiste parameters die OAuth2 nodig heeft om zijn magie te doen. Om een ​​"client_id" aan te maken, volgt u de instructies in Uw client-ID ophalen . De 'scopes' vermelden de autorisatiebereiken waarvoor het OAuth-token geldig is (bijvoorbeeld de API's waartoe de app toegang wil hebben).

Het gedeelte 'machtigingen' bevat URL's waartoe de app toegang heeft via XHR2. De URL-voorvoegsels zijn vereist zodat Chrome weet welke cross-domein verzoeken moeten worden toegestaan.

Het maken van de evenementenpagina

Alle Chrome-apps vereisen een achtergrondscript/-pagina om de app te starten en te reageren op systeemgebeurtenissen.

In het background.js- script opent Drive Uploader een venster van 500x600px naar de hoofdpagina. Het specificeert ook een minimale hoogte en breedte voor het venster, zodat de inhoud niet te krap wordt:

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'
  });
});

Het raam is gemaakt als chroomloos raam (frame: 'geen'). Standaard worden vensters weergegeven met de standaard sluit-/uitbreidings-/minimalisatiebalk van het besturingssysteem:

Google Drive-uploader zonder frame

De Uploader gebruikt frame: 'none' om het venster als een "lege lei" weer te geven en maakt een aangepaste sluitknop in main.html :

Google Drive Uploader met aangepast frame

Het gehele navigatiegebied is verpakt in een