Ajout exo routage

2015-04-09 23:11:56 +02:00
parent e0ad7f004d
commit 24ebf33c75
429 changed files with 13323 additions and 47 deletions
--- a/javascript/angular/exercices/directive-1/.solution/app.js
+++ b/javascript/angular/exercices/directive-1/.solution/app.js
@ -0,0 +1,41 @@
+/*
+ * Énoncé:
+ *
+ * Créer une directive "my-map" qui affiche une carte interactive dans la page via la librairie Leaflet.
+ * La directive comportera un attribut "marker" qui prendra en paramètre un objet de la forme:
+ * {
+ *   lat: <latitute>,
+ *   long: <longitude>
+ * }
+ * Cet objet devra servir à afficher un "Marker" sur la carte, et centrer celle ci sur la position donnée
+ *
+ * ! Le code et la feuille de style de la librairie Leaflet sont déjà intégrés dans la page !
+ *
+ * Documentation:
+ * - Librairie Leaflet: http://leafletjs.com/index.html
+ */
+
+
+var Exo = angular.module('Exo', []);
+
+Exo.directive('myMap', function() {
+
+  return {
+    restrict: 'E',
+    scope: {
+      marker: '=marker'
+    },
+    link: function(scope, element) {
+
+      var map = L.map(element[0]).setView([scope.marker.lat, scope.marker.long], 13);
+
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+
+      L.marker([scope.marker.lat, scope.marker.long]).addTo(map);
+
+    }
+  };
+
+});
--- a/javascript/angular/exercices/directive-1/.solution/index.html
+++ b/javascript/angular/exercices/directive-1/.solution/index.html
@ -0,0 +1,17 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>Exercice: Création de directive</title>
+  <link rel="stylesheet" href="../lib/leaflet-0.7.3/leaflet.css"></script>
+</head>
+<!-- Déclaration de l'application -->
+<body ng-app="Exo" ng-init="position = {'lat': 47.32758, long: 5.04277}">
+
+  <my-map marker="position" style="display:block; height: 600px; width: 800px;"></my-map>
+
+  <!-- Import de du framework Angular -->
+  <script src="../../node_modules/angular/angular.js"></script>
+  <script src="../lib/leaflet-0.7.3/leaflet.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>