Angular, première partie

2015-04-08 23:22:53 +02:00
parent de745ba6df
commit 16a28eb88b
32 changed files with 585 additions and 35 deletions
--- a/javascript/angular/exercices/iteration/.solution/app.js
+++ b/javascript/angular/exercices/iteration/.solution/app.js
@ -0,0 +1,47 @@
+/*
+ * Énoncé:
+ * Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences
+ * disponibles sur Github lors de la création d'un nouveau dépôt.
+ *
+ * Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description".
+ * Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode
+ * showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur.
+ *
+ * Aide:
+ * Voir l'élément <a /> pour l'affichage du lien et la directive ng-href sur la
+ * documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref
+ *
+ * Liens:
+ *  - API Github https://developer.github.com/v3/licenses
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {
+
+  $scope.licences = [];
+
+  $http({
+      method: 'GET',
+      url: 'https://api.github.com/licenses',
+      headers: { Accept: 'application/vnd.github.drax-preview+json' }
+    })
+    .then(function(res) {
+      $scope.licences = res.data;
+    })
+  ;
+
+  $scope.showLicenseDesc = function(licenceUrl) {
+    $http({
+        method: 'GET',
+        url: licenceUrl,
+        headers: { Accept: 'application/vnd.github.drax-preview+json' }
+      })
+      .then(function(res) {
+        $window.alert(res.data.description);
+      })
+      .catch(console.error.bind(console))
+    ;
+  };
+
+}]);
--- a/javascript/angular/exercices/iteration/.solution/index.html
+++ b/javascript/angular/exercices/iteration/.solution/index.html
@ -0,0 +1,32 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>Exercice: itération</title>
+</head>
+<!-- Déclaration de l'application -->
+<body ng-app="Exo">
+
+  <div ng-controller="MainCtrl">
+
+    <h1>Github Licenses</h1>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="l in licences">
+          <td>{{l.name}}</td>
+          <td><button ng-click="showLicenseDesc(l.url)">Show description</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Import de du framework Angular -->
+  <script src="../../node_modules/angular/angular.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>