docM4201 Javascript Technologies
download 
Plainte Transcription
M4201 Javascript Technologies
M4201 Javascript Technologies
AngularJS & NodeJS
Laboratory session 1
Jérôme Landré & Fabrice Meuzeret
DUT Métiers du Multimédia et de l'Internet
I.U.T. de Troyes
Université de Reims Champagne-Ardenne
1) Beginning with AngularJS
●
We will study the file:
« http://195.83.128.55/~jlandre/m4201/meanjs.html » <!DOCTYPE html>
<html lang="fr">
<head>
<title>Mean</title>
<meta charset="utf-8" />
</head>
<body style="font-family:sans-serif;">
<h1>Mean of two numbers</h1>
Number 1 : <input type="text" id="n1" /><br />
Number 2 : <input type="text" id="n2" /><br />
<button onclick="mean() ;">Compute</button>
<p id="res"></p>
<script>
function mean() {
var n1 = document.getElementById("n1").value;
var n2 = document.getElementById("n2").value;
document.getElementById("res").innerHTML="The mean is : "+((n1*1+n2*1)/2);
}
</script>
</body>
</html>
2
1) Beginning with AngularJS
●
●
●
a) Change this file in order to do the same
computing using AngularJS
Use ng-model to link input text fields with
variable
Use AngularJS to automatically compute the
mean while typing the numbers
3
1) Beginning with AngularJS
Before (pure JS)
After (AngularJS)
4
1) Beginning with AngularJS
●
b) Avoid the NaN problem : do not display the
mean result while the two numbers are not set
5
2) Football players
●
We will study the file:
« http://195.83.128.55/~jlandre/m4201/foot.html » <!DOCTYPE html>
<html lang="fr">
<head>
<title>Joueurs de l'équipe de France de football</title> <meta charset="utf-8" />
<script src="angular.min.js"></script>
</head>
<body>
<p ng-init='footballeurs=[{"photo":"zidane.jpg","nom":"ZIDANE", "prenom":"Zinédine",
"selections":108, "buts":31, "clubs":[{"nom":"AS Cannes"},…, {"photo":"platini.jpg","nom":"PLATINI",
"prenom":"Michel", "selections":72, "buts":41, "clubs":[{"nom":"AS Nancy-Lorraine"},{"nom":"AS SaintÉtienne"},{"nom":"Juventus de Turin (Italie)"}]}]'></p>
<p>
<input type="checkbox">Photo</input>
<input type="checkbox">Prénom</input>
...
</p>
<table border="1px">
<tr>
</tr>
</table>
</body>
</html>
6
2) Football players
●
●
a) Change « foot.html » in order to display
players firstname and lastname as a list
Use ng-repeat to create a <ul><li> list
7
2) Football players
●
●
●
b) Change « foot.html » in order to display
players data when you click the checkboxes
Use ng-model to link input text fields with
variable
Use AngularJS to display information
depending on the value of each checkbox
8
2) Football players
9
2) Football players
10
