Publier des documents web interactifs (AngularJS)

JSON vers HTML

Présenter des données JSON en HTML

Le but de l'exercice est de présenter des données JSON dans une page HTML en assurant une bonne structuration de la page. La finalité de cet exercice est de mettre en pratique les directives du module ng qu'on a vu en cours.

Les données représentent des tutoriels qui ont été présentés par des étudiants de l'UTC. On veut présenter ces données sous forme d'une liste. Chaque item contient des informations sur l'étudiant (le nom et le prénom de l'étudiant,le type , le titre et la date de la présentation ainsi que le nombre de "j'aime".

On souhaite aussi implémenter un système de vote pour évaluer l'ensemble des présentations en se basant sur le nombre de j'aime.

Ci-dessous, vous trouverez le code AngularJS qui permet de définir le contrôleur qui va s'occuper de passer les données JSON à la vue HTML.

Vous trouverez aussi la vue HTML qu'il faudra compléter pour arriver au résultat attendu.

1
// app.js
2
3
var app = angular.module('nf29', []); // notre module ne dépond d'aucun autre module
4
5
app.controller('CdtCtrl',['$scope', function($scope){
6
7
		$scope.tutorials = [
8
            {
9
            	"id": 1,
10
            	"isCDT" : true,
11
                "prenom": "Merouane",
12
                "nom": "Harriga",
13
                "date": "01-02-2014",
14
                "title": "AngularJs",
15
                "tags": ["AngularJs", "HTML5","Javascript"],
16
                "likeNumber" : 0
17
            },
18
19
            {
20
            	"id": 2,
21
            	"isCDT" : true,
22
                "prenom": "Alex",
23
                "nom": "Quilliec",
24
                "date": "01-03-2014",
25
                "title": "Scala",
26
                "tags": ["JAVA", "REST","API"],
27
                "likeNumber" : 0
28
            },
29
            {
30
            	"id": 3,
31
            	"isCDT" : true,
32
                "prenom": "Anthony",
33
                "nom": "Alfredo",
34
                "date": "01-04-2014",
35
                "title": "real time web apps",
36
                "tags": ["nodeJS", "Redis","websocket"],
37
                "likeNumber" : 0
38
            },
39
            {
40
            	"id": 4,
41
            	"isCDT" : false,
42
                "prenom": "Fred",
43
                "nom": "Alamy",
44
                "date": "01-05-2014",
45
                "title": "Numérical document",
46
                "tags": ["tranformation", "transclusion","scenari"],
47
                "likeNumber" : 0
48
            },
49
50
51
    ];
52
53
54
    $scope.thumbUp = function(...){
55
56
    }
57
    $scope.thumbDown = function(...){
58
59
    }
60
61
62
}]);
Ci-dessous le fichier HTML sur lequel on va travailler 
1
<!doctype html>
2
<html ng-app="nf29">
3
<head>
4
  <meta charset="UTF-8"/>
5
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
6
  <link rel="stylesheet" type="text/css" href="style.css">
7
</head>
8
  <body  class="container">
9
    <div ng-controller="CdtCtrl">
10
11
      <!-- Q1 -->
12
      <header> 
13
        <div class="container">
14
          <div class="row">
15
            <br>
16
            <nav class="navbar navbar-default" role="navigation">
17
              <div class="container-fluid">
18
               <div class="navbar-header">
19
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-admin">
20
                  <span class="sr-only"></span>
21
                  <span class="icon-bar"></span>
22
                  <span class="icon-bar"></span>
23
                  <span class="icon-bar"></span>
24
                </button>
25
                <a class="navbar-brand">Angular Js  <span class="glyphicon glyphicon-stats"></span></a>
26
                <p class="navbar-text" clickable>Cours NF29 ...</p>
27
              </div>
28
              <div class="collapse navbar-collapse" id="navbar-admin"></div>
29
              </div>
30
              </nav>
31
          </div>
32
          </div>
33
        </header>
34
35
36
        <div class="container">
37
38
          <ul class="list-group" id="contact-list">
39
         <!-- Q2 -->
40
            <li ... class="list-group-item">
41
              <div class="col-xs-12 col-sm-3">
42
                <img src="https://uxcam.com/images/join-uxcam.png" alt="Glenda Patterson" class="img-responsive img-circle fixedWidth" />
43
              </div>
44
              <div class="col-xs-12 col-sm-9">
45
                <span class="name"> nom prenom </span> <span> (Recommandé)</span><br/>
46
                <span> date</span>
47
                <hr />
48
49
                <ul class="tags"> 
50
                  0.1 tag 1
51
                  0.2 tag 2
52
                  ...
53
54
                </ul>
55
              </div>
56
57
              <!-- Q3 Vote -->
58
              <div class="row">
59
                <div class="col-sm-3 col-md-3 col-lg-3">
60
                  <div class="input-group"> 
61
                   <span><button type="button" id="increaseButton" class="btn btn-success">+</button> </span>
62
                   <span class=""><button type="button" id="decreaseButton" class="btn btn-danger">-</button> </span>
63
                   <span class=""><button type="button" id="decreaseButton" class="btn btn-info"> 50 </button></span>
64
                 </div>
65
               </div>
66
             </div>                        
67
             <div class="clearfix"></div>
68
           </li>
69
         </ul>
70
       </div>
71
     </div>
72
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
73
     <script src="app.js"></script>
74
   </body>
75
   </html>
Vous pouvez télécharger l'atelier de l'exercice. 
exercice.zip
Question
Externaliser le Header de la page En utilisant la directive ng-include 
Solution
1
<div ng-include="'header.html'"> </div>  
2
Question
En utilisant la directive ng-repeat, lister les tutoriels et les tags associées.
 Afficher la position des tags ainsi que la position de leurs père (position du père, position du tag) 
Indice
Vous pouvez construire des boucles imbriqués avec ng-repeat.
Indice
la directive ng-repeat expose aussi ses propriétés aux directives ng-repeat fils via l'objet $parent
Indice
1
<li ng-repeat="tutorial in tutorials" class="list-group-item" >
2
  <div class="col-xs-12 col-sm-3">
3
  <img src="https://uxcam.com/images/join-uxcam.png" alt="Glenda Patterson" class="img-responsive img-circle fixedWidth" />
4
  </div>
5
  <div class="col-xs-12 col-sm-9">
6
    <span class="name"> {{tutorial.nom}} {{...}}
7
    </span> <span> (Recommandé)</span><br/>
8
    <span> <i><strong>{{...}}</strong> </i> {{...}}</span>
9
    <hr />
10
    <ul class="tags"> 
11
      <li ng-repeat="tag in tutorial.tags">
12
       {{$parent...}}-{{...}}
13
      </li>
14
    </ul>
15
  </div>
16
  <div class="clearfix"></div>
17
</li>
Solution
1
<li ng-repeat="tutorial in tutorials" class="list-group-item" >
2
3
              <div class="col-xs-12 col-sm-3">
4
                <img src="https://uxcam.com/images/join-uxcam.png" alt="Glenda Patterson" class="img-responsive img-circle fixedWidth" />
5
              </div>
6
              <div class="col-xs-12 col-sm-9">
7
                <span class="name"> {{tutorial.nom}} {{tutorial.prenom}} </span> <span> (Recommandé)</span><br/>
8
                <span> <i><strong>{{tutorial.title}}</strong> </i> {{tutorial.date}}</span>
9
                <hr />
10
11
                <ul class="tags"> 
12
                  <li ng-repeat="tag in tutorial.tags">
13
                   {{$parent.$index}}-{{$index}} {{tag}}
14
                 </li>
15
            </ul>
16
             </div>                       
17
  <div class="clearfix"></div>
18
</li>
Question
On veut réaliser un système simple de vote en utilisant la directive ng-click.
Si l'utilisateur clique sur le bouton vert(+), le nombre de "likeNumber" s'augmente par 1 
Si l'utilisateur clique sur le bouton rouge(-), le nombre de "likeNumber" se diminue de 1 
Sachez que vous pouvez passer des paramètres depuis la vue HTML à une fonction au sein du contrôleur. 
Indice
1
<div class="input-group">
2
   <span>
3
      <button type="button"  class="btn btn-success" ng-click="thumbsUp(...)"></button>        
4
   </span>
5
   <span>
6
       <button type="button" class="btn btn-danger"   ng-click="thumbsDown(...)">-</button> 
7
   </span>
8
     <span class=""><button type="button"  class="btn btn-info"> {{...}} </button></span>
9
</div>
Indice
Les paramètres sont les tutoriels du premier ng-repeat
Notez bien qu'ils sont passés par référence. 
Vous pouvez passer aussi comme paramètre tout ce qui est attaché au $scope depuis la vue. Si la chaîne de caractère (le paramètre) correspond à une propriété du $scopeAngularJS passe avec référence la propriété en question, sinon le paramètre sera indéfinie au sein de l'appelé. 
Solution
1
...
2
<div class="input-group">
3
    <span>
4
        <button type="button" id="increaseButton" class="btn btn-success" ng-click="thumbsUp(tutorial)">+</button>
5
    </span>
6
    <span>
7
     <button type="button" id="decreaseButton" class="btn btn-danger"ng-click="thumbsDown(tutorial)">-</button>   
8
    </span>
9
    <span class="">
10
      <button type="button" id="decreaseButton" class="btn btn-info"> {{tutorial.likeNumber}} </button>
11
    </span>
12
</div>
13
..
1
 ...   
2
    $scope.thumbsUp = function(tutorial){
3
            tutorial.likeNumber++;
4
5
    }
6
    $scope.thumbsDown = function(tutorial){
7
            tutorial.likeNumber--;
8
9
    }
10
...
Question
Désormais on ne veut afficher la mention (recommandé) que pour les étudiants qui ont un nombre de "likes" strictement supérieur à 4.  
Indice
Utiliser la directive ng-show ou ng-hide ou  ng-if
Solution
1
<span ng-show="tutorial.likeNumber>4"> (Recommandé)</span>
Vous pouvez télécharger la solution complète.
solution.zip
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer
								Merouane HARRIGA, 2015 (Contributions : Stéphane Crozat, les étudiants de NF29) 
								Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)