Apps mit AngularJS erstellen

Wichtig:Der Support für Chrome-Apps wird auf allen Plattformen eingestellt. Chrome-Browser und wird der Chrome Web Store weiterhin Erweiterungen unterstützt. Hier finden Sie die Bekanntmachung. Weitere Informationen zur Migration Ihrer App

Diese Anleitung hilft Ihnen beim Erstellen von Chrome-Apps mit dem AngularJS MVC-Framework. Bis Angular in Aktion veranschaulichen, beziehen wir uns auf eine App, die mit dem Framework, dem Google Drive Uploader. Der Quellcode ist auf GitHub verfügbar.

Die App

Mit dem Google Drive Uploader können Nutzer die in ihren Google Drive-Konto an und laden Sie neue Dateien mithilfe der HTML Drag & Drop APIs hoch. Es ist ein gutes Beispiel für die Entwicklung einer App, die mit einer der APIs von Google kommuniziert In diesem Fall kann das Drive API

Hinweis:Sie können auch Apps erstellen, die mit OAuth2-fähigen APIs/Diensten von Drittanbietern kommunizieren. Weitere Informationen finden Sie unter Nicht-Google-Konto-Authentifizierung.

Der Uploader verwendet für den Zugriff auf die Daten des Nutzers OAuth2. Die chrome.identity API ermöglicht das Abrufen eines OAuth-Token für den angemeldeten Nutzer, damit die harte Arbeit für uns erledigt wird! Sobald wir eine lange Zugriffstoken verwendet, verwendet die App die Google Drive API für den Zugriff auf die Daten des Nutzers.

Wichtige Funktionen dieser App:

• Automatische Erkennung von AngularJS für CSP
• Eine Liste von Dateien rendern, die über die Google Drive API abgerufen wurden
• HTML5 Filesystem API zum Offline-Speichern von Dateisymbolen
• HTML5 Drag-and-drop zum Importieren/Hochladen neuer Dateien vom Desktop
• XHR2 zum Laden von domainübergreifenden Bildern
• chrome.identity API für die OAuth-Autorisierung
• Chromeless Frames zur Definition des App-eigenen Designs der Navigationsleiste

Manifest erstellen

Für alle Chrome-Apps ist eine manifest.json-Datei mit den Informationen erforderlich, die Chrome zum Starten benötigt in der App. Das Manifest enthält relevante Metadaten und alle speziellen Berechtigungen, die die App benötigt ausführen.

Eine reduzierte Version des Uploader-Manifests sieht so aus:

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

Die wichtigsten Teile dieses Manifests sind "oauth2". und „Berechtigungen“ .

Die „oauth2“ definiert die erforderlichen Parameter von OAuth2. So erstellen Sie ein "client_id" verwenden, folgen Sie der Anleitung unter Client-ID abrufen. Die „Bereiche“ listen Sie die Autorisierungsbereiche, für die das OAuth-Token gültig ist (z. B. die APIs, für die die App Zugriff).

Die „Berechtigungen“ enthält URLs, auf die die App über XHR2 zugreift. Die URL-Präfixe sind erforderlich, damit Chrome weiß, welche domainübergreifenden Anfragen zugelassen werden.

Veranstaltungsseite erstellen

Alle Chrome-Apps erfordern ein Hintergrundskript bzw. eine Hintergrundseite, um die App zu starten und auf Systemereignisse zu reagieren.

Im zugehörigen Skript background.js öffnet der Drive Uploader ein 500 x 600 Pixel großes Fenster zur Hauptseite. Außerdem gibt eine Mindesthöhe und -breite für das Fenster an, damit der Inhalt nicht zu stark zusammengedrückt wird:

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

Das Fenster wird als Chromeless-Fenster erstellt (Frame: 'none'). Standardmäßig werden Fenster mit der Standardleiste des Betriebssystems zum Schließen/Maximieren/Minimieren:

Der Uploader verwendet frame: 'none', um das Fenster als „leeres Slate“ zu rendern. und erstellt einen benutzerdefinierten Schaltfläche in main.html:

Der gesamte Navigationsbereich ist von

(siehe nächster Abschnitt). Um die App übersichtlicher zu gestalten, Die benutzerdefinierte Schließen-Schaltfläche wird ausgeblendet, bis der Nutzer mit diesem Bereich interagiert:

<style>
nav:hover #close-button {
  opacity: 1;
}

#close-button {
  float: right;
  padding: 0 5px 2px 5px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
</style>

<button class="btn" id="close-button" title="Close">x</button>

In app.js ist diese Schaltfläche mit window.close() verknüpft.

App nach Angular-Art entwerfen

Angular ist ein MVC-Framework. Daher müssen wir die App so definieren, dass ein Modell, eine Ansicht und aus dem Controller selbst herausfallen. Zum Glück ist dies bei Verwendung von Angular simpel.

Am einfachsten ist die Ansicht.

Ansicht erstellen

main.html ist das „V“ in MVC; in dem wir HTML-Vorlagen definieren, in denen Daten gerendert werden sollen. In Angular Vorlagen sind einfache HTML-Blöcke mit besonderer Note.

Letztendlich möchten wir die Liste der Dateien des Nutzers anzeigen. Dafür ist eine einfache

. Die Angular-Bits sind fett hervorgehoben:

<ul>
  <li data-ng-repeat="doc in docs">
    <img data-ng-src=""> <a href=""></a>

    <span class="date"></span>
  </li>
</ul>

Der Code sieht genau so aus:

• für jedes Dokument in unserem Datenmodelldokument. Jedes Element enthält ein Dateisymbol, einen Link zum Öffnen der Datei im Web und das Datum der letzten Aktualisierung.
  Hinweis: Damit die Vorlage gültig ist, verwenden wir data-*-Attribute für das ngRepeat. Dies ist jedoch nicht erforderlich. Sie könnten den Repeater ganz einfach so schreiben: <li ng-repeat="doc in docs">

  Als Nächstes müssen wir Angular mitteilen, welcher Controller das Rendering dieser Vorlage überwachen soll. Dafür haben wir die Anweisung ngController verwenden, um dem DocsController mitzuteilen, dass er Vorrang vor der Vorlage hat :

  <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>
  

  Was Sie hier nicht sehen, ist, dass wir Ereignis-Listener oder -Properties für Daten aktivieren. Bindung. Angular übernimmt diese schwere Aufgabe für uns!

  Im letzten Schritt wird Angular unsere Vorlagen beleuchtet. Dazu nehmen Sie normalerweise die ngApp-Anweisung bis ganz oben in :

  <html data-ng-app="gDriveApp">
  

  Wenn Sie möchten, können Sie die App auch auf einen kleineren Teil der Seite beschränken. Wir haben nur einen Controller in dieser App. Um später weitere hinzuzufügen, stellen Sie ngApp ganz oben auf. macht die gesamte Seite angular bereit.

  Das endgültige Produkt für main.html sieht in etwa so aus:

  <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>
  

  Eine Anmerkung zur Content Security Policy

  Im Gegensatz zu vielen anderen JS MVC-Frameworks erfordert Angular Version 1.1.0 oder höher keine Änderungen, um innerhalb einer strikten CSP: Es funktioniert einfach, sofort nach dem Auspacken!

  Falls Sie jedoch zwischen v1.0.1 und v1.1.0 eine ältere Angular-Version verwenden, Angular zur Ausführung im „Inhaltssicherheitsmodus“ Dies erfolgt durch Einschließen der ngCsp-Anweisung neben ngApp:

  <html data-ng-app data-ng-csp>
  

  Autorisierung verarbeiten

  Das Datenmodell wird nicht von der App selbst generiert. Stattdessen wird er aus einer externen API (dem Google Drive API. Daher ist ein wenig Arbeit erforderlich, um die App-Daten auszufüllen.

  Bevor wir eine API-Anfrage stellen können, müssen wir ein OAuth-Token für das Google-Konto des Nutzers abrufen. Dafür haben wir eine Methode erstellt, um den Aufruf von chrome.identity.getAuthToken() zusammenzufassen und die accessToken, den wir für zukünftige Aufrufe der Drive API wiederverwenden können.

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

  Hinweis: Durch die Übergabe des optionalen Callbacks wissen wir ganz flexibel, wann das OAuth-Token bereit.
  Hinweis: Zur Vereinfachung haben wir die Bibliothek gdocs.js zur Verwaltung von API-Aufgaben erstellt.

  Sobald Sie das Token haben, können Sie Anfragen an die Drive API senden und das Modell mit Daten füllen.

  Skelett-Controller

  Das „Modell“ für den Uploader ist ein einfaches Array (Dokumente) von Objekten, die als diese

• in der Vorlage:

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

  Beachten Sie, dass gdocs.auth() als Teil des DocsController-Konstruktors aufgerufen wird. Wenn Angular und internen Servern den Controller erstellen, ist versichert, dass ein neues OAuth-Token auf den Nutzer wartet.

  Daten abrufen

  Vorlage angeordnet. Controller-Gerüst. OAuth-Token liegt vor. Was heißt das für die Zukunft?

  Definieren Sie jetzt die Methode fetchDocs() für die Hauptsteuerung. Er ist das Arbeitspferd des Controllers, verantwortlich für die Anforderung der Dateien des Nutzers und die Füllung des docs-Array mit Daten aus API-Antworten.

  $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() verwendet den $http-Dienst von Angular, um den Hauptfeed über XHR abzurufen. OAuth-Zugriff Das Token ist zusammen mit anderen benutzerdefinierten Headern und Parametern im Authorization-Header enthalten.

  successCallback verarbeitet die API-Antwort und erstellt für jeden Eintrag im Feed.

  Wenn Sie fetchDocs() jetzt ausführen, funktioniert alles und die Liste der Dateien wird angezeigt:

  

  Sauber!

  Moment, wir fehlen diese ordentlichen Dateisymbole. What gives? Ein kurzer Blick in die Konsole zeigt der CSP-bezogenen Fehler:

  

  Wir versuchen, die Symbole img.src auf externe URLs zu setzen. Dies verstößt gegen die CSP. Beispiel: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png Um dieses Problem zu beheben, diese Remote-Assets lokal in die App laden müssen.

  Remote-Image-Assets importieren

  Damit die CSP uns nicht mehr anschreit, nutzen wir XHR2 für den „Import“. die Dateisymbole als Blobs aus und legen dann img.src zu einem von der App erstellten blob: URL.

  Hier ist die aktualisierte successCallback mit dem hinzugefügten XHR-Code:

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

  Nachdem die CSP nun wieder mit uns zufrieden ist, erhalten wir schöne Dateisymbole:

  

  Offline gehen: Externe Ressourcen im Cache speichern

  Die offensichtliche Optimierung, die durchgeführt werden muss: Stellen Sie nicht hunderte von XHR-Anfragen für jedes Dateisymbol auf bei jedem Aufruf von fetchDocs(). Überprüfen Sie dies in der Entwicklertools-Konsole, indem Sie auf die Schaltfläche "Aktualisieren" auf die Schaltfläche klicken. Jedes Mal werden n Bilder abgerufen:

  

  Lassen Sie uns successCallback ändern, um eine Caching-Ebene hinzuzufügen. Die Ergänzungen sind fett hervorgehoben:

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

  Beachten Sie, dass wir im webkitResolveLocalFileSystemURL()-Callback $scope.$apply() aufrufen, wenn wann der letzte Eintrag erkannt wird. Normalerweise ist das Aufrufen von $apply() nicht erforderlich. Angular erkennt Änderungen an Daten Modelle zu erstellen. In unserem Fall gibt es jedoch eine zusätzliche Schicht für den asynchronen Angular weiß das nicht. Wir müssen Angular explizit mitteilen, wenn unser Modell aktualisiert wurde.

  Bei der ersten Ausführung befinden sich die Symbole nicht im HTML5-Dateisystem und die Aufrufe der window.webkitResolveLocalFileSystemURL() führt dazu, dass der zugehörige Fehler-Callback aufgerufen wird. Dafür können wir die vorhergehende Technik wiederverwenden und die Bilder abrufen. Der einzige Unterschied diesmal Jedes Blob wird in das Dateisystem geschrieben (siehe writeFile()). Dies wird in der Console bestätigt Verhalten:

  

  Bei der nächsten Ausführung oder durch Klicken auf die Schaltfläche "Aktualisieren" wird die an webkitResolveLocalFileSystemURL() ist vorhanden, weil die Datei zuvor im Cache gespeichert wurde. Die App legt fest, das doc.icon zum filesystem: URL der Datei hinzu und vermeidet, die kostspielige XHR für das Symbol zu erstellen.

  Hochladen per Drag-and-drop

  Eine Uploader-App macht fälschlicherweise Werbung, wenn sie keine Dateien hochladen kann.

  Für diese Funktion implementiert app.js eine kleine Bibliothek mit Drag-and-drop von HTML5 namens DnDFileController Dateien vom Desktop lassen sich per Drag-and-drop hochladen. in Google Drive hochladen.

  Die Aufgabe wird einfach durch Hinzufügen zum Gdocs-Dienst erledigt:

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