Cette page fait partie de la documentation de la plate-forme d'applications Chrome, qui a été abandonnée en 2020. Les clients Enterprise et Education sur ChromeOS continueront d'y avoir accès au moins jusqu'en janvier 2025. En savoir plus sur la migration de votre application

Cette page a été traduite par l'API Cloud Translation.

Créer des applications avec AngularJS

Ce guide vous aide à créer des applications Chrome avec le framework MVC AngularJS. À Pour illustrer le fonctionnement d'Angular, nous ferons référence à une application réelle créée à l'aide du framework, Programme de transfert Google Drive. Le code source est disponible sur GitHub.

À propos de l'application

Programme de transfert Google Drive

Le programme de transfert Google Drive permet aux utilisateurs d'afficher et d'interagir rapidement avec les fichiers stockés dans leur Google Drive et importer de nouveaux fichiers à l'aide des API HTML glisser-déposer. Il s'agit d'un excellent exemple de création d'une application qui communique avec l'une des API de Google ; dans ce cas, API Drive.

Le programme de transfert utilise OAuth2 pour accéder aux données de l'utilisateur. L'API chrome.identity gère la récupération d'une Jeton OAuth pour l'utilisateur connecté. Le plus dur est donc ! Une fois que nous aurons une longue vie les applications utilisent l'API Google Drive pour accéder aux données de l'utilisateur.

Principales fonctionnalités utilisées par cette application:

Détection automatique d'AngularJS pour CSP
Afficher la liste des fichiers récupérés à partir de l'API Google Drive
API HTML5 Filesystem pour stocker les icônes de fichiers hors connexion
Glisser-déposer HTML5 pour importer de nouveaux fichiers à partir du bureau
XHR2 pour charger des images, interdomaines
API chrome.identity pour l'autorisation OAuth
Des cadres Chromeless pour définir l'apparence de la barre de navigation de l'application

Créer le fichier manifeste

Toutes les applications Chrome nécessitent un fichier manifest.json contenant les informations nécessaires au lancement de Chrome l'application. Le fichier manifeste contient les métadonnées pertinentes et répertorie toutes les autorisations spéciales dont l'application a besoin pour exécuter.

Une version simplifiée du fichier manifeste de l'outil de mise en ligne se présente comme suit:

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

Les parties les plus importantes de ce fichier manifeste sont et les "autorisations" .

La classe "oauth2" définit les paramètres requis par OAuth2 pour faire son travail. Pour créer un "client_id", suivez les instructions de la section Obtenir votre ID client. Les "champs d'application" lister les champs d'application d'autorisation pour lesquels le jeton OAuth sera valide (par exemple, les API que l'application souhaite l'accès).

La section "Autorisations" inclut les URL auxquelles l'application accède via XHR2. Les préfixes d'URL nécessaire pour que Chrome sache quelles requêtes interdomaines autoriser.

Créer la page de l'événement

Toutes les applications Chrome nécessitent un script ou une page en arrière-plan pour lancer l'application et répondre aux événements système.

Dans son script background.js, le programme de transfert Drive ouvre une fenêtre de 500 x 600 pixels vers la page principale. Il y a aussi spécifie une hauteur et une largeur minimales pour la fenêtre afin que le contenu ne soit pas trop écrasé:

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

La fenêtre est créée sous la forme d'une fenêtre Chromeless (cadre : "none"). Par défaut, les fenêtres s'affichent avec le paramètre Barre de fermeture/d'expansion/de réduction par défaut du système d'exploitation:

Programme de transfert Google Drive sans cadre

L'outil de mise en ligne utilise frame: 'none' pour afficher la fenêtre en tant qu'écran vierge. puis crée une fermeture personnalisée dans main.html:

Programme de transfert Google Drive avec cadre personnalisé

L'ensemble de la zone de navigation est

(voir la section suivante). Pour désencombrer un peu l'application, le bouton de fermeture personnalisé est masqué jusqu'à ce que l'utilisateur interagisse avec la zone suivante:

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

Dans app.js, ce bouton est associé à window.close().

Concevoir l'application de manière angulaire

Angular est un framework MVC. Nous devons donc définir l'application de sorte qu'un modèle, une vue et le contrôleur en ressortent logiquement. Heureusement, cette méthode est très simple lorsque vous utilisez Angular.

La vue étant la plus simple, commençons par là.

Créer la vue

main.html correspond à la lettre "V". au format MVC. dans lequel nous définissons des modèles HTML dans lesquels afficher les données. Dans Angular, les modèles sont de simples blocs de code HTML ayant une incidence spéciale.

En fin de compte, nous voulons afficher la liste des fichiers de l'utilisateur. Pour cela, un simple

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

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

qui se lit exactement comme il se présente :

pour chaque document de notre modèle de données "docs". Chaque élément contient une icône de fichier, un lien pour ouvrir le fichier sur le Web et une date de dernière mise à jour.

Remarque:Pour que le modèle HTML soit valide, nous utilisons des attributs data-* pour le code HTML ngRepeat, mais ce n'est pas obligatoire. Vous pouvez facilement écrire le répéteur <li ng-repeat="doc in docs">
.
Nous devons ensuite indiquer à Angular quel contrôleur supervisera le rendu de ce modèle. Pour cela, nous Utilisez la directive ngController pour indiquer à DocsController de contrôler le modèle. :
```
<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>
```
Notez que nous ne pouvons pas connecter des écouteurs d'événements ou des propriétés pour les données liée. Angular effectue le gros du travail pour nous.

La dernière étape consiste à faire en sorte qu'Angular éclaire nos modèles. Pour ce faire, la méthode classique est d'inclure ngApp jusqu'à :
```
<html data-ng-app="gDriveApp">
```
Si vous le souhaitez, vous pouvez également limiter l'application à une plus petite partie de la page. Nous n'avons une manette dans cette application, mais si nous devons en ajouter d'autres par la suite, en plaçant ngApp au-dessus rend toute la page compatible avec Angular.

Le produit final pour main.html ressemble à ceci:
```
<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>
```
Remarque concernant Content Security Policy

Contrairement à de nombreux autres frameworks JS MVC, Angular v1.1.0+ ne nécessite aucun ajustement pour fonctionner dans un environnement CSP. Cette solution est prête à l'emploi !

Toutefois, si vous utilisez une ancienne version d'Angular entre les versions 1.0.1 et 1.1.0, vous devez indiquer Exécuter Angular en "mode sécurité du contenu" Pour ce faire, vous devez inclure la directive ngCsp. avec ngApp:
```
<html data-ng-app data-ng-csp>
```
Gérer l'autorisation

Le modèle de données n'est pas généré par l'application elle-même. Il est renseigné à partir d'une API externe (le API Google Drive). Un travail de mise en œuvre est donc nécessaire pour renseigner les données de l'application.

Avant de pouvoir envoyer une requête API, nous devons récupérer un jeton OAuth pour le compte Google de l'utilisateur. Pour cela, nous avons créé une méthode permettant d'encapsuler l'appel à chrome.identity.getAuthToken() et de stocker le accessToken, que nous pourrons réutiliser pour de futurs appels à l'API Drive
```
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);
  }
};
```
Remarque:La transmission du rappel facultatif nous permet de savoir quand le jeton OAuth est à votre disposition.

Remarque:Pour simplifier un peu les choses, nous avons créé une bibliothèque, gdocs.js, qui permet de gérer les tâches de l'API.

Une fois que nous avons le jeton, nous pouvons envoyer des requêtes à l'API Drive et remplir le modèle.

Manette squelette

Le "modèle" pour le programme de transfert est un simple tableau (appelé "docs") d'objets qui seront affichés ces

dans le modèle:

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

}

Notez que gdocs.auth() est appelé dans le cadre du constructeur DocsController. Lorsque internes créent le contrôleur, nous sommes assurés d’avoir un nouveau jeton OAuth en attente de l’utilisateur.

Récupération des données en cours

Modèle présenté. Contrôleur en échafaudage. Jeton OAuth en main. Et maintenant ?

Il est temps de définir la méthode principale du contrôleur, fetchDocs(). C'est l'outil de travail du contrôleur, qui est chargée de demander les fichiers de l'utilisateur et de remplir le tableau de documents avec les données des réponses de l'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() utilise le service $http d'Angular pour récupérer le flux principal via XHR. L'accès OAuth le jeton est inclus dans l'en-tête Authorization avec d'autres en-têtes et paramètres personnalisés.

successCallback traite la réponse de l'API et crée un objet doc pour chaque entrée de la classe flux.

Si vous exécutez fetchDocs() maintenant, tout fonctionne et la liste des fichiers s'affiche:

La liste des fichiers a été récupérée dans le programme de transfert Google Drive

Victoire !

Attendez, il nous manque ces belles icônes de fichiers. What gives? Un rapide contrôle de la console montre un certain nombre des erreurs liées à CSP:

Erreurs CSP dans la Play Console

En effet, nous essayons de définir les icônes img.src sur des URL externes. Ceci est contraire à CSP. Exemple : https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. Pour résoudre ce problème, devez extraire ces ressources distantes localement dans l'application.

Importer des composants Image distant

Pour que CSP cesse de nous crier dessus, nous utilisons XHR2 pour "importer" les icônes de fichier en tant que Blobs, puis définissez img.src à un blob: URL créé par l'application.

Voici le fichier successCallback mis à jour avec le code XHR ajouté:

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

Maintenant que CSP est de nouveau satisfait de nous, nous obtenons de belles icônes de fichiers:

Programme de transfert Google Drive avec icônes de fichiers

Passer hors connexion: mettre en cache des ressources externes

L'optimisation évidente à effectuer: ne pas effectuer des centaines de requêtes XHR pour chaque icône de fichier chaque appel à fetchDocs(). Vérifiez cela dans la console des outils pour les développeurs en appuyant sur le bouton "Actualiser" plusieurs fois. Chaque fois, n images sont récupérées:

Modifions successCallback pour ajouter une couche de mise en cache. Les ajouts sont indiqués en gras:

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

Notez que dans le rappel webkitResolveLocalFileSystemURL(), nous appelons $scope.$apply() lorsque la dernière entrée est vue. Normalement, appeler $apply() n'est pas nécessaire. Angular détecte les modifications apportées aux données de manière automatisée. Cependant, dans notre cas, il existe une couche supplémentaire de rappel asynchrone qui dont Angular n'a pas connaissance. Nous devons indiquer explicitement à Angular lorsque notre modèle a été mis à jour.

Lors de la première exécution, les icônes ne figurent pas dans le système de fichiers HTML5, et les appels à window.webkitResolveLocalFileSystemURL() entraînera l'appel de son rappel d'erreur. Pour cela nous pouvons réutiliser la technique précédente et récupérer les images. La seule différence, cette fois-ci, que chaque blob est écrit dans le système de fichiers (voir writeFile()). La console vérifie comportement:

Lors de la prochaine exécution (ou lorsque vous appuyez sur le bouton "Actualiser"), l'URL est transmise à webkitResolveLocalFileSystemURL() existe, car le fichier a déjà été mis en cache. L’application définit doc.icon au filesystem: URL du fichier et évite d'avoir à utiliser XHR, trop coûteux pour l'icône.

Importation par glisser-déposer

Une application d'importation fait de la publicité trompeuse lorsqu'elle ne peut pas importer de fichiers.

app.js gère cette fonctionnalité en implémentant une petite bibliothèque autour du glisser-déposer HTML5 appelée DnDFileController Il permet de faire glisser des fichiers depuis le bureau et de les importer dans Google Drive.

Il suffit d'ajouter ceci au service gdocs pour obtenir le résultat voulu:

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