Micro Application 2 : SuperVache avec Angular.Js

Introduction : supervachelogo


C’est un exercice de Micro application d’enregistrement de vaches avec sliders, pourcentages, et modifications en temps réel avec Angular.js.

From Scratch, mais un peu inspiré par http://jsfiddle.net/7n8NR/3/

Pas de couche de persistance. Tout est en RAM. A tester ICI .

Description :


Langage : Angular.js, Html5.0, Css3.0

Temps de réalisation : 1h30

Type : Micro-Application Front office

vache1

Explication


On a un seul fichier Index.html qui est une single page application.

Dans ce fichier,

  1. On charge la librairie Angular.js,
  2. On a un contrôleur qui contient toutes les fonctions qui opérent sur la vue.
  3. On a une vue Html qui se mets à jour en temps réel automatiquement.
  4. On a les CSS en fin de fichier. (Ils ont été générés par des générateurs sur internet et copiés collés en 2 minutes)

Dans le contrôleur (Le js),

  • La fonction enregistrer() enregistre une vache dans le tableau vaches[].
  • La fonction modifierClique() charge dans la vue les données d’une vache préexistante.
  • La fonction rmodifs() (avec r pour record) enregistre une modification.

Dans la vue (Le html) :

  • Une div « Informations », pour informer l’utilisateur.
  • Une div « Formulaire » pour que l’utilisateur entre les données.
  • Une div « Vision » qui renseigne l’utilisateur en temps réel avec angular.
  • Une div « Liste » qui est le tableau des vaches enregistrées, et qui s’actualise en temps réel avec angular.

 Note : Le bouton « Modifier la vache » est désactivé si on ne clique pas sur « modifier » avant.(Faudrait changer le css d’un bouton désactivé.)

L’autre amélioration serait de créer une fonction inti() qui initialise les données d’une vache à un car là je réecris toutes les variables pour réinitialiser à chaque fois.

Le Code :



<html lang="fr" ng-app="achat">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			var myApp = angular.module('achat',[]);
				
			myApp.controller('NameCtrl', function($scope) {
				
				//Initialisation des Variables
				var date = new Date();
				$scope.nom		='Vache';
				$scope.laitage	='1';
				$scope.vivacite	='1';
				$scope.age		='1';
				$scope.date		= date;
				$scope.alert	='Rien à signaler';
				$scope.vaches = [];
				document.getElementById("modif").disabled = true; 
				
				// Enregistre une vache et ses caractéristiques en Mémoire Vive, dans un tableau js
				$scope.enregistrer	=	function(){
	
					if ($scope.nom == ''){
					$scope.alert='Le Champs nom de la Vache est Vide';
					}
					
					else {
					// Ajoute le nom et le prix de l'objet au tableau
					$scope.vaches.push({
						nom: $scope.nom,
						laitage: $scope.laitage,
						vivacite: $scope.vivacite,
						age: $scope.age,
					});
						$scope.alert='Elément ajouté';
						// Supprime le contenu des champs après un push de variables dans le tableau
						$scope.nom		='Vache';
						$scope.laitage	='1';
						$scope.vivacite	='1';
						$scope.age		='1';
						
					}
				}
					
				
				// Affiche les données d'une vache enregistrée en RAM et Modifie .
				$scope.modifierClique	=	function(index){
						document.getElementById("modif").disabled = false; 
						window.index = index;
						//Initialisation des curseurs avec les données de la vache
						$scope.nom 		= $scope.vaches[index].nom;
						$scope.laitage 	= $scope.vaches[index].laitage;
						$scope.vivacite = $scope.vaches[index].vivacite;
						$scope.age		= $scope.vaches[index].age;
						$scope.alert	='Modifiez la vache';
				}
				
				// Enregistre les données modifiees d'une vache en RAM .
				$scope.rmodifs	=	function(){
						
						i=window.index;
						
						$scope.vaches[i].nom 		= $scope.nom 	;
						$scope.vaches[i].laitage	= $scope.laitage ;
						$scope.vaches[i].vivacite 	= $scope.vivacite;
						$scope.vaches[i].age 		= $scope.age	;
						document.getElementById("modif").disabled = true; 
						$scope.alert	='La vache a été modifiée, boutton "Modifier la vache" désactivé';
						$scope.nom		='Vache';
						$scope.laitage	='1';
						$scope.vivacite	='1';
						$scope.age		='1';
				}
				
				// Affiche combien il y a de lignes dans le tableau
				$scope.getTotalItems = function () {
					return $scope.vaches.length;
				};
				
				
				// Supprime une vache dans liste
				$scope.supprimeClique = function (index) {
						$scope.vaches.splice(index, 1);
				};
			
			
				// Affiche le prix total des Vaches (optionnel)
				$scope.getTotal = function(){
					var total = 0;
					for(var i = 0; i < $scope.vaches.length; i++){
					total += $scope.vaches[i].prix;
					}
					return total;
				}
			});
			
		</script>
	</head>

<body ng-controller="NameCtrl" class="body">

	<div class="formulaire" ><h1><p> Ajouter une Vache</p></h1>
		<img src="vache.jpg" class="img"><br><br>
		<form>
			<label >Nom :</label> 	
			<input ng-model="nom" type="text" class ="champs" /><br>
			<label >Laitage:</label>        
			<input ng-model="laitage" type="range" min="0" max="100"class ="champs"  /> %<br>
			<label >Vivacité:</label>        
			<input ng-model="vivacite" type="range" min="0" max="100" class ="champs" /> % <br>
			<label >Age :</label>        
			<input ng-model="age" type="range" min="0" max="20"   class ="champs" /> Ans<br>	<br><br>
			<button class="btn" ng-click="enregistrer()" > Ajouter la Vache</button>
			<button class="btn" ng-click="rmodifs($index)" id="modif" >Modifier la Vache</button>
		</form>
	</div>	


	<div class="infos"><h1> <p>Informations:</p></h1>
		<p>
		{{alert}}
		</p>
	</div>	
		
	<div class="vision" > <h1><p> Description:</p></h1>
		<p>Votre vache s'appelle <b>{{nom}}</b><br>
		<b>Laitage </b>{{laitage}} % <br>
		<b>Vivacité </b>{{vivacite}}  % <br>
		<b>Age </b>{{age}}  ans<br>
	</div>

	<br>	

	<div class="liste"><h1><p>Liste({{getTotalItems()}})</p></h1>
		 <input type="search" ng-model="q" placeholder="Rechercher une Vache" />
		<table class="CSSTableGenerator " >
		   <tr>
					<td><b>Nom:</b></td>
					<td><b>Laitage:</b></td>
					<td><b>Vivacité:</b></td>
					<td><b>Age:</b></td>
					<td><b>Modifier:</b></td>
					<td><b>Supprimer:</b></td>
			</tr>
		   <tr  ng-repeat="vache in vaches | filter:q as results" >
					<td>{{vache.nom}} </td>
					<td>{{vache.laitage}} %</td>
					<td>{{vache.vivacite}} %</td>
					<td>{{vache.age}} ans</td>
					<td><button ng-click="modifierClique($index)" class="btn">Modifier</button></td>
					<td><button ng-click="supprimeClique($index)" class="btn">Supprimer</button></td>

			</tr>
		</table>	
	</div>	


</body>
		
<style>
.body{
	font-family:arial;
	font-size:1.2em;
			}
			
.img{
	height:200px;
	width:200px;
	float:left;
	margin-left:15px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}		
h1{
	font-size:1.2em;
	background-color:lightgrey;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
p{
	margin-left:15px;
}
.infos{
	min-height:20px;
	height:auto;
	width:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	float:left;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
}
.formulaire{
	height:360px;
	width:700px;
	background-color:ivory;
	text-align:center;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
.vision{
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	height:150px;
	width:auto;
	background-color:ivory;
	margin-right: auto ;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
.liste{
	max-height:300px;
	min-height:20px;
	height:auto;
	width:auto;
	background-color:ivory;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;$
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	margin: 0px auto;
	overflow:auto;
}
.champs{
	margin-top:5px;
	width:200px;
	align: center ;
	margin-left: auto ;
	margin-right: auto ;	
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table{
	border-collapse: collapse;
		border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}
.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}
.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}
.CSSTableGenerator tr:hover td{
	background-color:#cccc99;
		
}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#cccccc;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:1.2em;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}
.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:1.2em;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
.btn {
	background: #d93484;
	background-image: -webkit-linear-gradient(top, #d93484, #b82b2b);
	background-image: -moz-linear-gradient(top, #d93484, #b82b2b);
	background-image: -ms-linear-gradient(top, #d93484, #b82b2b);
	background-image: -o-linear-gradient(top, #d93484, #b82b2b);
	background-image: linear-gradient(to bottom, #d93484, #b82b2b);
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	text-shadow: 5px 3px 3px #666666;
	-webkit-box-shadow: 4px 8px 11px #666666;
	-moz-box-shadow: 4px 8px 11px #666666;
	box-shadow: 4px 8px 11px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size:1.0em;
	padding: 21px;
	border: solid #d1047f 3px;
	text-decoration: none;
}
.btn:hover {
	background: #fcd63c;
	background-image: -webkit-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -moz-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -ms-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -o-linear-gradient(top, #fcd63c, #cc5414);
	background-image: linear-gradient(to bottom, #fcd63c, #cc5414);
	text-decoration: none;
}
		
</style>

</html>
Publicités