Micro App 10 : « Evalue Une ville », Micro app MVC Angular

Introduction.evalueville


Aujourd’hui, je vais créer une micro application d’évaluation de Villes, avec AngularJS à tester ici .

Synopsys


Un représentant Commercial se déplace sur le territoire, à la recherche d’opportunités.

Le soir, il a besoin de faire un point rapide sur ses impressions à propos de la Ville qu’il a visité.

A la fin du mois, il pourra ainsi consulter les statistiques qui lui sortiront automatiquement les villes ayant apporté le plus d’opportunités lors de son trajet. Il peut aussi envoyer les résultat par email. ( A l’aide de ce code :

http://www.chaosm.net/blog/2014/05/21/angularjs-contact-form-with-bootstrap-and-phpmailer/)

« Brainstorming » en vrac !


  • Lors du passage de la souris sur le nom d’une ville, Google Map pourrait s’afficher (Chaaauuuud !)
  • Créer une factory angular pour le local storage, c’est bien, créer une seconde factory pour un stockage mongodb, c’est mieux !
  • Faudrait enfin réussir à rendre l’application réellement paramétrable en permettant l’ajout de nouvelles catégories d’évaluation par l’utilisateur par clic de bouton! (C’est chauuuud à faire !)
  • Le logiciel pourrait calculer automatiquement le trajet total effectué par le représentant de commerce, l’essence dépensé, les frais dépensés. Surtout il pourrait calculer les trajets les moins chers avec le célèbre algoritme du voyageur de commerce(Recherche Opérationnelle) mais bon c justeu une idée
  • Les frameworks angular mobiles permettent d’utiliser  la localisation GPS des Smartphones… On pourrait s’en servir.
  • L’utilisateur pourrait uploader automatiquement les photos de ses visites dans les villes citées.
  • Le logiciel pourrait stocker les téléphones et Emails des clients potentiels, par ville.
  • Les contacts peuvent être gérés comme dans cet exemple :http://codepen.io/brian-baum/pen/BqEyL
  • Lors de l’ajout d’un nouveau contact, il doit s’ajouter automatiquement aux contacts gmail du commercial
  • L’identification google angular doit être utilisée
  • A surveiller : L’api GMAIL https://developers.google.com/gmail/api/
  • VMAP doit pouvoir filtrer mais aussi pourrait afficher les régions non visitées/auditées par couleurs
  • Un logiciel annexe manié par les responsables pourrait distribuer les villes à auditer dans cette appli.

Journal


Jour 2 :Autres idées :

  • Le logiciel doit être collaboratif, dans la logique, si je crée une seconde factory qui s’occupe de l’enregistrement sur MongoDB et si chaque utilisateur, authentifié par google, dispose de sa liste de villes, il serait alors possible de laisser un commercial voir les appréciations des autres commerciaux au sujet d’une ville, voir même d’attribuer des droits.
  • Cela s’apparenterait alors à un CRM partagé mobile.
  • Le look est pitoyable, mais cela est à voir en second, on pourrait envisager d’utiliser un framework angular Mobile pour refaire le design.
  • j’ai essayé de télécharger un CRM gratuit pour copier : Pas moyen, tous payant.

Description


  • Type : Micro- Application front-end Web de type Saas (faudrait essayer mobile).
  • Langage : Js, Angular, Bootstrap UI, Html 5.0, Css3.0
  • Format d’échanges de Données : JSON
  • Back-end : non .
  • Difficulté : ++/+++++
  • Test avec jasmine : Non.
  • Durée de codage : 8 heures – 24Heures Maxi
  • UML 2.0 : non.
  • Webstorage(stockage des données dans le navigateur) : Une factory Local Storage.
  • Gestion de la concurence : non.
  • Webservice : non.
  • Authentification : Oui Google :https://auth0.com/authenticate/angular/gmail
  • Minification Grunt : non.
  • Nodes.Js : non.
  • MongoDb : non.
  • Ambition Commerciale : non.
  • Etude de Marché, Barrières commerciales  : non.

Mon code à Heure+9:

<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Evalue une Ville</title>
		<!-- CHARGEMENT DES LIBRAIRIES -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-route.min.js"></script>
		<script src="angular-filter.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
	
		<!-- APPEL LIB PAGINATION ANGULAR -->
		<script src="librairies/dirPagination.js"></script>
		<script src="librairies/dirPagination.tpl.html"></script>
		
		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
		<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="librairies/font-awesome-4.3.0/css/font-awesome.min.css">
		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		
		<!-- APPEL LIB AUTOCOMPLETE -->
		 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
		<script src="librairies/ngAutocomplete.js"></script>
		
		<!--  LIBRAIRIE VMAP -->
		 <link href="librairies/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
		<script src="librairies/jquery.vmap.js" type="text/javascript"></script>
		<script src="librairies/jquery.vmap.france.js" type="text/javascript"></script>
		<script src="librairies/jquery.vmap.colorsFrance.js" type="text/javascript"></script>
			

		 <!-- CSS DE L'APPLICATION -->	
		<link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
		
	<script>
		
		
		
		<!-- Déclaration des modules utilisés par l'application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d'Angular, ce sont des librairies  -->
		 var monApp = angular.module('monApp',['ui.bootstrap','ngRoute','angular.filter','angularUtils.directives.dirPagination','ngAutocomplete'])
		
		
		
		<!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
		.config(function ($routeProvider, $locationProvider){
		  $routeProvider
			.when('/accueil', {
			  templateUrl: 'defaut.html',
			})
			.when('/liste', {
			  templateUrl: 'liste.html',
			  controller: 'listeCtrl'
			})
			.when('/detail', {
			  templateUrl: 'detail.html',
			  controller: 'detailsCtrl'
			})
			.when('/statistiques', {
			  templateUrl: 'stats.html',
			  controller: 'stats'
			})			
			.otherwise({redirectTo: '/accueil'});
		})
		
		
		
		
		
		
		<!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. -->
		<!-- Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt  -->
		
		
		
		<!-- LE CONTROLEUR DE L'ACCUEIL -->
		.controller("accueilCtrl", function($scope) {
			$scope.bonjour = "Mr Durand";
		<!-- FIN DU CONTROLEUR -->
		})
		
		
		
		
		<!-- LE CONTROLEUR DE LA LISTE  -->
		.controller("listeCtrl", function($scope,LSservice) {
		
			<!-- Initialisation des variables -->
			$scope.max = 10 ; 				// Maximum d'étoiles rating
			$scope.villes = LSservice.init();// Charge le modèle à partir de la factory/service qui s'occupe des datas
			$scope.newVille = {};
			window.nomVille = "Lille"; 		// Par défaut
			
			<!-- PROGRAMME -->
			
			<!-- Affecte l'id courant pour la vue Détail de la Ville, lors du click sur le  bouton d'une ville -->
			$scope.setIdCourant = function(nomVille){
				$scope.villeDetail = nomVille;
				window.nomVille =  nomVille; // obligé de faire ça sinon la var ne passe pas entre les controleurs bizarrement, $scope n'est pas partagé j'ai pas compris pouquoi encore
			};
			
			<!-- AUTOCOMPLETE GOOGLE -->
			$scope.modd
			$scope.result2 = '';
			$scope.options2 = {
				country: 'fr',
				types: 'geocode'
			};    
			$scope.details2 = '';
			
			<!-- AJOUTER UNE VILLE -->
			$scope.addVille = function(/** String */ ville) {
				if (ville!=null){
					$scope.villes.push({
						nom: ville,
						 contacts:
						[
						
						],
						 photos:
						[
							{"nom":"","txt":""},
						]
					})
					$scope.newVille.ville = "";
				}
				else{
					Alert ('Entrez le nom');
				};
			};
			
			<!-- SUPPRIMER UNE VILLE -->
			$scope.deleteVille = function(idx) {
			  $scope.villes.splice(idx, 1);
			};
			  
			<!-- CHARGER Une liste de villes avec Web Storage -->
			$scope.l = function(){
				$scope.villes = LSservice.get();
			};
			
			<!-- ENREGISTRER une liste de villes avec Web Storage -->
			$scope.r = function(){
				LSservice.set($scope.villes);
			};			
			  
			
			
			<!-- Watcher lambda du modèle -->
			$scope.$watch('villes', function () {
				$scope.count += 1;
			}, true);
		
		<!-- FIN DU CONTROLEUR -->
		})
		
		
		
		
		
		<!-- LE CONTROLEUR D'UN OBJET A EDITER  -->
		.controller("detailsCtrl", function($scope,LSservice) {
		
			$scope.villes = LSservice.init();// Charge le modèle
			$scope.villeDetail=window.nomVille; // 
		
		
			<!-- AJOUTER UN CONTACT A UNE VILLE -->
			$scope.addContact = function(){
				
				for (x=0;x<$scope.villes.length;x++){
					if ($scope.villes[x].nom === $scope.villeDetail){
						$scope.villes[x].contacts.push({
							nom: "Nom",
							prenom:"Prénom",
							email:"Email",
							telephone:"Téléphone"
						});
					};
				};
			};
			
			<!-- SUPPRIMER UN CONTACT A UNE VILLE -->
			$scope.deleteContact = function(idx){
				
				for (x=0;x<$scope.villes.length;x++){
					if ($scope.villes[x].nom === $scope.villeDetail){
						$scope.villes[x].contacts.splice(idx,1);
					};
				};
			};
			
			$scope.number = '';
		
			<!-- FIN DU CONTROLEUR -->
		})
		
		<!-- LE CONTROLEUR DES STATISTIQUES  -->
		.controller("stats", function($scope) {
		<!-- FIN DU CONTROLEUR -->
		})
		
		
			.factory("LSservice", function() {
					 
				
					return{
						init: function(){
							<!-- Le modèle : -->
							var villes = [
								{
								nom: "Lille",
								  score: 5,
								  score1: 3,
								  score2: 7,
								  contacts:
									[
										{"nom":"Dupont","prenom":"Bart","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
								   photos:
									[
										{"nom":"lille.jpg","txt":""},
									]
									
								
								}, 
								{
								  nom: "St Denis",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								{
								  nom: "Nice",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"GOnzales","prenom":"Henri","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"nice.jpg","txt":""},
									]
								 
								},
								{
								  nom: "Marseille",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								
									{
								nom: "Nantes",
								  score: 5,
								  score1: 3,
								  score2: 7,
								  contacts:
									[
										{"nom":"Dupont","prenom":"Bart","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
								   photos:
									[
										{"nom":"lille.jpg","txt":""},
									]
									
								
								}, 
								{
								  nom: "Rostrenen",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								{
								  nom: "Cannes",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"GOnzales","prenom":"Henri","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"nice.jpg","txt":""},
									]
								 
								},
								{
								  nom: "Dinant",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								
									{
								nom: "Grenoble",
								  score: 5,
								  score1: 3,
								  score2: 7,
								  contacts:
									[
										{"nom":"Dupont","prenom":"Bart","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
								   photos:
									[
										{"nom":"lille.jpg","txt":""},
									]
									
								
								}, 
								{
								  nom: "Annecy",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								{
								  nom: "Toulon",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"GOnzales","prenom":"Henri","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"nice.jpg","txt":""},
									]
								 
								},
								{
								  nom: "Hyeres",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								
									{
								nom: "La plage",
								  score: 5,
								  score1: 3,
								  score2: 7,
								  contacts:
									[
										{"nom":"Dupont","prenom":"Bart","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
								   photos:
									[
										{"nom":"lille.jpg","txt":""},
									]
									
								
								}, 
								{
								  nom: "Montmorency",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
								{
								  nom: "Gourin",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"GOnzales","prenom":"Henri","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"nice.jpg","txt":""},
									]
								 
								},
								{
								  nom: "le Faouet",
								  score: 5,
								  score1: 3,
								  score2: 7,
								   contacts:
									[
										{"nom":"dalmbert","prenom":"Choubala","email":"n@n.com","telephone":"06 68 45 20 39"},
										{"nom":"Charvet","prenom":"Thierry","email":"n@n.com","telephone":"06 68 33 20 39"}
									],
									 photos:
									[
										{"nom":"stdenis.jpg","txt":""},
									]
								}, 
						];
						
						return villes;
						},						
					
						get : function(){
							var villes = JSON.parse(localStorage.getItem("villes"));
							return villes;
						},
						set : function(villes){
							var u = JSON.stringify(villes);
							localStorage.setItem("villes",u);
							return true;
						}
					};
			});	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- CARTE FRANCE VMAP PLACE ICI POUR LINSTANT -->
		$(document).ready(function() {
		$('#francemap').vectorMap({
		    map: 'france_fr',
			hoverOpacity: 0.5,
			hoverColor: false,
			backgroundColor: "#ffffff",
			colors: couleurs,
			borderColor: "#000000",
			selectedColor: "#EC0000",
			enableZoom: true,
			showTooltip: true,
		    onRegionClick: function(element, code, region)
				{
					var message = 'Département : "'
						+ region 
						+ '" || Code : "'
						+ code
						+ '"';
				 
					alert(message);
				}
		});
		});	
			
		
	</script>
	<!-- Chargement de la factory des Datas : -->
	
 </head>


 
 <!--   La page HTML générale -->
<body ng-controller="accueilCtrl" >
 
<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view  -->
	<div  class="container ">
		<div class="menu designDiv"> 
			<a href="#/accueil"			class="">Accueil</a>
			<a href="#/liste" 			class="">Liste	</a>
			<a href="#/detail" 			class="">Details</a>
			<a href="#/statistiques"	class="">Stats	</a>
		</div>
			  
		<div id = "filtres" class="designDiv">
		<h3>Filtres</h3>
			<input type="search" ng-model="q" placeholder="Rechercher une ville..." /> 
			<div class="franceContainer designDiv" ><div id="francemap" class="franceMap" ></div></div>
		
		<h3>Actions</h3>
		<form role="form" id="form">
			<div class="row">
				<div class=" form-group move-down">
					<label class="sr-only" for="ville">Ville</label>
					<input type="text" class="form-control inputspe" name="ville" placeholder="Nom de la ville ..." details="details2" options="options2"
					ng-model="newVille.ville" autofocus ng-required="!newVille.ville"   id="Autocomplete" class="form-control" ng-autocomplete ></input>
					
					<input numbers-only="numbers-only"   onKeyDown="limitText(this,4);"  limit-to="4"  ng-maxlength="5" class="form-control inputspe" name="departement" placeholder="Département de la ville ..." 
					details="details2" options="options2"
					ng-model="newVille.departement"  
					ng-required="!newVille.departement"   
					id="Autocomplete" class="form-control input-lg" 
					ng-required="true" ng-autocomplete ></input>
					       
					
					
					<div>{{result2}}</div>
					<button type="submit" ng-click="addVille(newVille.ville, newVille.title)" class="btnspe  form-control">Ajouter</button>
					<button ng-click="r()" class="btnspe form-control">Enregistrer ma Liste</button>
					<button ng-click="l()" class="btnspe  form-control">Charger ma Liste</button>
					<select class="btnspe form-control" data-ng-model="filtre" ng-options="opt.style as opt.style for style in villes| unique:'style'" ><option value="">Catégorie ...</option></select>
				</div>
				
				
			</div>
		</div>
		
		<!-- Cette balise NG-View va afficher les différentes vues  -->
		<div id="main" class="designDiv">
			<div ng-view></div>
		</div>

	</div>		

	
		</form> 	
	</div>	
</body>



<!-- Voici maintenant la liste des vues qui s'affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!--  VUE HTML : DEFAUT-->
	<script type="text/ng-template" id="defaut.html">
		Bonjour {{bonjour}} je suis la vue de l'accueil.
	</script>

	
	
	
<!--  VUE HTML : LISTE -->
	<script type="text/ng-template" id="liste.html">
		Bonjour, je suis la vue qui présente une liste d'objets.
		<h3>Liste des Villes</h3>
			<div  dir-paginate="ville in villes | filter:q|itemsPerPage: 6  " class="cart" ">
				<a ng-href="#detail" ng-click="setIdCourant(ville.nom)" ><button class="btn btn-default form-control" ng-href="#detail" ng-model="ville.nom" ng-click="setIdCourant(ville.nom)" >{{ville.nom}}</button></a><br><br>
							<img src="opportunite.jpg" 	class="timg">		</img>Opportunités	
						<rating ng-model="ville.score" 	max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'">sqd</rating><br>	
							<img src="commerce.png" 	class="timg">		</img>Commerces		
						<rating ng-model="ville.score1" 	max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'">sqd</rating>
						<br>	<img src="sorties.png" 	class="timg">		</img>Environnement	
							<rating ng-model="ville.score2" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'">sqd</rating><br>
						<div class="bas">
					<button type="button" class="btn btn-danger pull-right " ng-click="deleteVille($index)"><i class="fa fa-trash-o"></i></button>
				</div>
			</div>
		 <dir-pagination-controls></dir-pagination-controls>	
	</script>







	
<!--  VUE HTML : DETAIL -->
	<script type="text/ng-template" id="detail.html">
		<div id ="detailVille" title="Les détails de la ville">
			<h1>{{villeDetail}}</h1>
			<h2>Contacts commerciaux:</h2> 
				<div ng-repeat="ville in villes | filter:{nom:villeDetail}"><!-- La variable villeDetail est le nom de la ville que l'on a cliqué, ça filtre donc par nom de ville -->
									
					<div class="ascenceur" >
						<div data-ng-repeat="contact in ville.contacts">
							<img src="client.png" class="timg" ></img>
							<input ng-model="contact.nom"></input>
							<input ng-model="contact.prenom"></input>
							<input ng-model="contact.email"></input>
							<input ng-model="contact.telephone" ></input> 
							<button type="button" class="btn btn-danger pull-right" ng-click="deleteContact($index)"><i class="fa fa-trash-o"></i></button>	
						</div><br>
					</div>
				</div>
			<button ng-click="addContact()">Un Autre..<i class="fa fa-plus-square droite"></i> </button> 
		
			<h2>Photos:</h2> 
				<div ng-repeat="ville in villes | filter:{nom:villeDetail}"><!-- La variable villeDetail est le nom de la ville que l'on a cliqué, ça filtre donc par nom de ville -->
									
					<div class="ascenceur" >
						<div data-ng-repeat="photo in ville.photos">
							<img src="{{photo.nom}}" class="logo" ></img>
							<button type="button" class="btn btn-danger pull-right" ng-click=""><i class="fa fa-trash-o"></i></button>	
						</div><br>
					</div>
									
				</div>
	 
		</div>
	</script>	
	
	
<!--  VUE HTML : STATS -->
	<script type="text/ng-template" id="stats.html">
		Bonjour, je suis la vue qui présente des statistiques.
	</script>	
	

Publicités