Publier des documents web interactifs (AngularJS)

Afficher le planAfficher le plan

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.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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
}]);
// app.js

var app = angular.module('nf29', []); // notre module ne dépond d'aucun autre module

app.controller('CdtCtrl',['$scope', function($scope){

		$scope.tutorials = [
            {
            	"id": 1,
            	"isCDT" : true,
                "prenom": "Merouane",
                "nom": "Harriga",
                "date": "01-02-2014",
                "title": "AngularJs",
                "tags": ["AngularJs", "HTML5","Javascript"],
                "likeNumber" : 0
            },

            {
            	"id": 2,
            	"isCDT" : true,
                "prenom": "Alex",
                "nom": "Quilliec",
                "date": "01-03-2014",
                "title": "Scala",
                "tags": ["JAVA", "REST","API"],
                "likeNumber" : 0
            },
            {
            	"id": 3,
            	"isCDT" : true,
                "prenom": "Anthony",
                "nom": "Alfredo",
                "date": "01-04-2014",
                "title": "real time web apps",
                "tags": ["nodeJS", "Redis","websocket"],
                "likeNumber" : 0
            },
            {
            	"id": 4,
            	"isCDT" : false,
                "prenom": "Fred",
                "nom": "Alamy",
                "date": "01-05-2014",
                "title": "Numérical document",
                "tags": ["tranformation", "transclusion","scenari"],
                "likeNumber" : 0
            },


    ];


    $scope.thumbUp = function(...){

    }
    $scope.thumbDown = function(...){

    }


}]);
Ci-dessous le fichier HTML sur lequel on va travailler 
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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>
<!doctype html>
<html ng-app="nf29">
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  <body  class="container">
    <div ng-controller="CdtCtrl">

      <!-- Q1 -->
      <header> 
        <div class="container">
          <div class="row">
            <br>
            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
               <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-admin">
                  <span class="sr-only"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">Angular Js  <span class="glyphicon glyphicon-stats"></span></a>
                <p class="navbar-text" clickable>Cours NF29 ...</p>
              </div>
              <div class="collapse navbar-collapse" id="navbar-admin"></div>
              </div>
              </nav>
          </div>
          </div>
        </header>


        <div class="container">

          <ul class="list-group" id="contact-list">
         <!-- Q2 -->
            <li ... class="list-group-item">
              <div class="col-xs-12 col-sm-3">
                <img src="https://uxcam.com/images/join-uxcam.png" alt="Glenda Patterson" class="img-responsive img-circle fixedWidth" />
              </div>
              <div class="col-xs-12 col-sm-9">
                <span class="name"> nom prenom </span> <span> (Recommandé)</span><br/>
                <span> date</span>
                <hr />

                <ul class="tags"> 
                  0.1 tag 1
                  0.2 tag 2
                  ...

                </ul>
              </div>

              <!-- Q3 Vote -->
              <div class="row">
                <div class="col-sm-3 col-md-3 col-lg-3">
                  <div class="input-group"> 
                   <span><button type="button" id="increaseButton" class="btn btn-success">+</button> </span>
                   <span class=""><button type="button" id="decreaseButton" class="btn btn-danger">-</button> </span>
                   <span class=""><button type="button" id="decreaseButton" class="btn btn-info"> 50 </button></span>
                 </div>
               </div>
             </div>                        
             <div class="clearfix"></div>
           </li>
         </ul>
       </div>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
     <script src="app.js"></script>
   </body>
   </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 
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) 
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. 
Question
Désormais on ne veut afficher la mention (recommandé) que pour les étudiants qui ont un nombre de "likes" strictement supérieur à 4.  
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)