Exercices Angular

Exercices Angular :

Introduction :
Voici tous mes codes Angular, du plus simple au plus complexe, qui vont me servir
pour mon exercice 21, j’en mettrais aussi dan l’exercice 20, une fois qu’il sera opérationnel.
Le principal intérêt d’Angular est : Le format MVC, qui permet aux autres devs de bien comprendre un code structuré. La mise à jour en temps réel automatisée de la vue .

EXO1. Utilisation des Champs, sans contrôleur, les variables avec les moustaches sont dans la vue :



<html ng-app>
<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.js"					></script>
	<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->

</head>

<body>
	Nom:	<input ng-model="nom" 		type="text"/>
	Prénom:	<input ng-model="prenom" 	type="text"/>
	age:	<input ng-model="age" 		type="text"/>
	Mail:	<input ng-model="email" 	type="email" />


<div style="margin-top:300px;height:200px;width:400px;background-color:lightgrey">
		Hello {{prenom}} {{nom}} , ca va ?</br>
		Vous avez {{age}} ans et votre email est {{email}}
</div>

</body>
</html>

EXO 2.Utilisation des champs, avec un contrôleur, et initialisation des Champs avec les variables présentes dans le contrôleur.


$scope.watch permet de visualiser en temps réel la variable entrée dans la console firebug.
:

<html ng-app="test">
	<head>
		<meta charset="iso-8859-15" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
				<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.js"></script>
		<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			var myApp = angular.module('test',[]);

			myApp.controller('NameCtrl', function($scope) {
				$scope.prenom	='Nicolas';
				$scope.nom		='Huleux';
				$scope.age		='24';
				$scope.email	='jo@jo.fr';
			});

			$scope.watch('Nom',function(newValue,oldValue){
			console.log('new value is'+newValue);
			});

		</script>
	</head>

<body ng-controller="NameCtrl">
	Nom:	<input ng-model="nom" 		type="text"/>
	Prénom:	<input ng-model="prenom" 	type="text"/>
	Age:	<input ng-model="age" 		type="text"/>
	Email:	<input ng-model="email" 	type="email" />
<div style="margin-top:300px;height:200px;width:400px;background-color:lightgrey">
		Hello {{prenom}} {{nom}} , ca va ?</br>
		Vous avez {{age}} ans et votre email est {{email}}</div>
</body>

</html>

EXO 3. Affichage d’un tableau présent dans le contrôleur avec ng-repeat, les noms s’affichent dans la vue.


ng-repeat est l’équivalent d’une boucle foreach :

<html ng-app="test">
    <head>
        <meta 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('test',[]);

            myApp.controller('NameCtrl', function($scope) {
                $scope.tableau    =['Nicolas','Thomas','Carine'];
            });
        </script>
    </head>

<body ng-controller="NameCtrl">
<ul>
	<li ng-repeat="nom in tableau">{{nom}}</li>
</u1>
</body>
</html></pre>
<pre>

EXO 4: Un champs permet d’ajouter en « live » une variable au tableau déjà présent dans la vue, la vue se mets automatiquement à jour.


On se sert de Push pour pousser la var à la fin du tableau :

</pre>
<html ng-app="test">
<head>
<meta 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('test',[]);

// Le controleur
myApp.controller('NameCtrl', function($scope) {
$scope.tableau    =    ['Nicolas','Thomas','Carine'];

$scope.ajoutNom    =    function(){
$scope.tableau.push($scope.entrerlenom);
$scope.entrerlenom='un Autre';
}
});
</script>
</head>

<!-- La vue -->
<body ng-controller="NameCtrl">
<ul>
	<li ng-repeat="nom in tableau">{{nom}}</li>
</u1>
<form    ng-submit="ajoutNom()">

<input type="text" ng-model="entrerlenom" >
<input type="submit" value="Ajouter une Personne">
</form>

</body>
</html>
<pre>

EXO 5 : On peut ajouter et supprimer des éléments d’un tableau, directement en live dans le navigateur grâce à Push (pour ajouter)et Splice (pour supprimer).



<html ng-app="test">
	<head>
		<meta 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('test',[]);

// Le controleur
			myApp.controller('NameCtrl', function($scope) {
				// Afficher le tableau
				$scope.tableau	=	['Nicolas','Thomas','Carine'];

				// Ajouter un nom
				$scope.ajoutNom	=	function(){
				$scope.tableau.push($scope.entrerlenom);
				$scope.alert='élément ajouté';
				};

				//Supprimer un nom
				$scope.supprimerNom = function(nom){
					var i = $scope.tableau.indexOf(nom); // Donne le numéro d'index du nom dans le tableau
					$scope.tableau.splice(i,1); // Utilise la fonction Splice qui supprime l'index i dans le tableau
					$scope.alert='élément supprimé';
				}

			});
		</script>
	</head>

<!-- La vue -->
<body ng-controller="NameCtrl">
<div style="margin-top:10px;height:200px;width:400px;background-color:tan">
<ul>
	<li ng-repeat="nom in tableau">{{nom}}
		<a href="" ng-click="supprimerNom(nom)">Supprimer</a></li>
</u1>

	<form	ng-submit="ajoutNom()">
		<input type="text" ng-model="entrerlenom" >
		<input type="submit" value="Ajouter une Personne">
	</form>
{{alert}}</div>
</body>
</html>

Exo 6: Enregistrer en Ajax les valeurs de curseurs HTML.


Voici un exercice très important basé sur ce code trouvé sur Internet

Le but est de récupérer des valeurs de curseurs Range HTML, avec Angular, puis de les enregistrer avec Ajax, après appui sur un bouton.

Le programmeur initial a utilisé des objets, des getters et des setters pour initialiser et modifier les valeurs des curseurs HTML.
J’ai modifié le code pour le simplifier ici.

On a donc 1 curseur pour renseigner le nb d’étudiants, un curseur pour entrer le nb de classes.

On voit que dans le contrôleur angular, les curseurs sont initialisés à une valeur qui peut elle aussi être récupérée par appel ajax(très important).
Ensuite, lors du click sur le bouton, la fonction enregistrer du contrôleur récupère les valeurs des 2 ranges, les valeurs sont donc prêtes à être enregistrées en AJAX.

Au final, on a un code très clair, très dynamique, très compressé et MVC, et tout cela en temps réel, sans rechargement de page

Le Code :

<html ng-app="myApp">
	<head>
		<meta 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('myApp', []);

	//Le contrôleur :
	myApp.controller('CalcCtrl', function ($scope) {

			//Initialisation des valeurs des curseurs
			$scope.nbetudiants = new Quantite(20);
			$scope.nbclasses = new Quantite2(50);

			//Enregistrer les données
			$scope.enregistrer = function(){
				nb1 = $scope.nbetudiants;
				nb2 = $scope.nbclasses;
				console.log(nb1); // nb1 est un objet
				console.log(nb1.nbetudiants); //nb1.nbetudiants est une valeur qu'on peut enregistrer
				alert('Données enregistrées : '+nb1.nbetudiants+' étudiants et '+nb2.nbclasses+' classes ');
			}
	});

	// Constructeur de l'objet Quantity
	function Quantite(numOfPcs) {
		var nbetudiants = numOfPcs;

		this.__defineGetter__("nbetudiants", function () {
			return nbetudiants;
		});

		this.__defineSetter__("nbetudiants", function (val) {
			val = parseInt(val);
			nbetudiants = val;
		});
	}

	// Constructeur de l'objet Quantity2
	function Quantite2(numOfPcs) {
		var nbclasses = numOfPcs;

		this.__defineGetter__("nbclasses", function () {
			return nbclasses;
		});

		this.__defineSetter__("nbclasses", function (val) {
			val = parseInt(val);
			nbclasses = val;
		});
	}
</script>
</head>

<!-- La vue -->
<body >
<div ng-controller="CalcCtrl">
		<form>
			<label for="pcs">Etudiants:</label>
				<input type="range" min="0" max="1000" ng-model="nbetudiants.nbetudiants"/>
<label for="pcs">Classes:</label>
				<input type="range" min="0" max="50" ng-model="nbclasses.nbclasses"/>
</form>
	{{nbetudiants}}
	{{nbclasses}}
	<button ng-click="enregistrer()">Enregistrer</button></div>
</body>

</html>

Exo 7 : Utiliser un Objet Json avec Angular.


$scope peut contenir un objet Json contenant une liste de pays :

<html ng-app="myApp" title="Traiter un Objet Json avec Angular">
	<head>
		<meta 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('myApp', []);

	//Le contrôleur :
	myApp.controller('PaysCtrl', function ($scope) {

			//Initialisation des valeurs
			$scope.listepays = [
			{"nom":"Chine","population":1359821000},
			{"nom":"Inde","population":1205625000},
			{"nom":"France","population":66000000},];

	});
	</script>
</head>

<!-- La vue -->
<body ng-controller="PaysCtrl">
<ul>
	<li ng-repeat="pays in listepays">{{pays.nom}} - Population {{pays.population}}</li>
</ul>
</body>
</html>

Exo 8 : Récupérer un fichier Json avec Angular .


Voici la fonction $http qui s’apparente donc à $.ajax() de Jquery et nous permet de récupérer un fichier Json en Http. Tout comme $ajax() de Jquery, il y a une fonction de rappel(callback) qui s’appelle « success » après que le fichier a bien été reçu.
Toutes les instructions peuvent donc ensuite être exécutées dans ce callback, suite à réception du fichier JSON.

<html ng-app="myApp" title="Telecharger un Objet Json avec Angular">
	<head>
		<meta 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('myApp', []);

//Le contrôleur :
	myApp.controller('PaysCtrl', function ($scope,$http) {
		$http.get('listepays.json').success(function(data){
			$scope.listepays = data;
		});
	});
	</script>
</head>

<!-- La vue -->
	<body ng-controller="PaysCtrl">
<table >
<tr>
<th>Pays</th>
<th>Population</th>
</tr>
<tr ng-repeat="pays in listepays">
<td id="{{pays.nom}}">{{pays.nom}}</th>
<td>{{pays.population}}</th>
</tr>
</table>
</body>
</html>

Le fichier Json est celui-ci :listepays.json, et il est, dans ce cas, stocké à la racine du serveur. :

[{"nom":"Chine","population":1359821000},
{"nom":"Inde","population":1205625000},
{"nom":"France","population":66000000}]

Exo 9 : Ajouter une fonction de recherche Angular sur un tableau Html.


En deux lignes de codes Angular, on peut ajouter un champs input de recherche sur un tableau Html comme ceci (C’est le même code que l’exo précédent.)

<html ng-app="myApp" title="Telecharger un Objet Json avec Angular">
	<head>
		<meta 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('myApp', []);

//Le contrôleur :
	myApp.controller('PaysCtrl', function ($scope,$http) {
		$http.get('listepays.json').success(function(data){
			$scope.listepays = data;
		});
	});
	</script>
</head>

<!-- La vue -->
	<body ng-controller="PaysCtrl">
	Recherche:<input ng-model="query" type="text" />
<table>
<tr>
<th>Pays</th>
<th>Population</th>
</tr>
<tr ng-repeat="pays in listepays | filter:query">
<td id="{{pays.nom}}">{{pays.nom}}</th>
<td>{{pays.population}}</th>
</tr>
</table>
</body>
</html>

Publicités