Corrections slides
This commit is contained in:
58
javascript/angular/exercices/filtres-1/.solution/app.js
Normal file
58
javascript/angular/exercices/filtres-1/.solution/app.js
Normal file
@ -0,0 +1,58 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
*
|
||||
* 1. Modifier le template de index.html afin de modifier l'affichage des commits
|
||||
* dans la table HTML en utilisant les filtres de base d'Angular.
|
||||
*
|
||||
* Contraintes d'affichage:
|
||||
* - La date du commit devra être affiché au format "dd-mm-yyyy"
|
||||
* - L'afichage du SHA du commit devra être limité à 10 caractères
|
||||
*
|
||||
* ! Pas besoin de modifier le code de app.js !
|
||||
*
|
||||
* 2. Mettre en place les directives et le filtre nécessaire afin d'implémenter
|
||||
* un champ de recherche permettant de filtrer la liste des commits.
|
||||
*
|
||||
* Indice:
|
||||
* - Filtre "filter": https://code.angularjs.org/1.3.15/docs/api/ng/filter/filter
|
||||
*
|
||||
* ! Pas besoin de modifier le code de app.js !
|
||||
*
|
||||
* 3. Implémenter un filtre qui "met en lumière" (change la couleur du fond du texte) les éléments
|
||||
* correspondants à la recherche dans le message de commit.
|
||||
*
|
||||
* Exemple d'usage attendu: {{ 'my text' | highlight:'my' }}
|
||||
*
|
||||
* Indices:
|
||||
* - Le filtre devra rechercher le texte voulu et le remplacer par un fragment de HTML
|
||||
* - Nécessite l'usage du service $sce dans le filtre et de sa méthode $sce.trustAsHtml() https://docs.angularjs.org/api/ngSanitize
|
||||
* - Nécessite également l'utilisation de la directive ng-bind-html plutot que l'utilisation des {{ ... }} https://docs.angularjs.org/api/ng/directive/ngBindHtml
|
||||
*
|
||||
*/
|
||||
|
||||
var Exo = angular.module('Exo', []);
|
||||
|
||||
Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
|
||||
|
||||
$scope.commits = [];
|
||||
|
||||
$http.get('https://api.github.com/repos/torvalds/linux/commits')
|
||||
.then(function(res) {
|
||||
$scope.commits = res.data;
|
||||
})
|
||||
;
|
||||
|
||||
}]);
|
||||
|
||||
Exo.filter('highlight', ['$sce', function($sce) {
|
||||
|
||||
return function(input, needle) {
|
||||
|
||||
if( !angular.isString(input) ) return input;
|
||||
|
||||
var html = '<span style="background: yellow">'+needle+'</span>';
|
||||
return $sce.trustAsHtml(input.replace(needle, html));
|
||||
|
||||
};
|
||||
|
||||
}]);
|
||||
46
javascript/angular/exercices/filtres-1/.solution/index.html
Normal file
46
javascript/angular/exercices/filtres-1/.solution/index.html
Normal file
@ -0,0 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice: Utilisation des filtres</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
|
||||
<h1>Commits du dépôt torvalds/linux sur Github</h1>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">
|
||||
<input type="text" style="width: 100%" placeholder="Filtrer la liste" ng-model="search" />
|
||||
</th>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>SHA</th>
|
||||
<th>Author</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr ng-repeat="c in commits | filter:search">
|
||||
<td>{{c.commit.author.date | date:'dd-mm-yyyy' }}</td>
|
||||
<td>{{c.sha | limitTo:10 }}</td>
|
||||
<td>{{c.commit.author.name }}</td>
|
||||
<td ng-bind-html="c.commit.message | highlight:search"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
javascript/angular/exercices/filtres-1/app.js
vendored
Normal file
46
javascript/angular/exercices/filtres-1/app.js
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
*
|
||||
* 1. Modifier le template de index.html afin de modifier l'affichage des commits
|
||||
* dans la table HTML en utilisant les filtres de base d'Angular.
|
||||
*
|
||||
* Contraintes d'affichage:
|
||||
* - La date du commit devra être affiché au format "dd-mm-yyyy"
|
||||
* - L'afichage du SHA du commit devra être limité à 10 caractères
|
||||
*
|
||||
* ! Pas besoin de modifier le code de app.js !
|
||||
*
|
||||
* 2. Mettre en place les directives et le filtre nécessaire afin d'implémenter
|
||||
* un champ de recherche permettant de filtrer la liste des commits.
|
||||
*
|
||||
* Indice:
|
||||
* - Filtre "filter": https://code.angularjs.org/1.3.15/docs/api/ng/filter/filter
|
||||
*
|
||||
* ! Pas besoin de modifier le code de app.js !
|
||||
*
|
||||
* 3. Implémenter un filtre qui "met en lumière" (change la couleur du fond du texte) les éléments
|
||||
* correspondants à la recherche dans le message de commit.
|
||||
*
|
||||
* Exemple d'usage attendu: {{ 'my text' | highlight:'my' }}
|
||||
*
|
||||
* Indices:
|
||||
* - Le filtre devra rechercher le texte voulu et le remplacer par un fragment de HTML
|
||||
* - Nécessite l'usage du service $sce dans le filtre et de sa méthode $sce.trustAsHtml(), voir https://docs.angularjs.org/api/ngSanitize
|
||||
* - Nécessite également l'utilisation de la directive "ng-bind-html" plutot que l'utilisation des {{ ... }} pour l'affichage du message, voir https://docs.angularjs.org/api/ng/directive/ngBindHtml
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
var Exo = angular.module('Exo', []);
|
||||
|
||||
Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
|
||||
|
||||
$scope.commits = [];
|
||||
|
||||
$http.get('https://api.github.com/repos/torvalds/linux/commits')
|
||||
.then(function(res) {
|
||||
$scope.commits = res.data;
|
||||
})
|
||||
;
|
||||
|
||||
}]);
|
||||
46
javascript/angular/exercices/filtres-1/index.html
Normal file
46
javascript/angular/exercices/filtres-1/index.html
Normal file
@ -0,0 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice: Utilisation des filtres</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
|
||||
<h1>Commits du dépôt torvalds/linux sur Github</h1>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">
|
||||
<input type="text" style="width: 100%" placeholder="Filtrer la liste" />
|
||||
</th>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>SHA</th>
|
||||
<th>Author</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr ng-repeat="c in commits">
|
||||
<td>{{c.commit.author.date }}</td>
|
||||
<td>{{c.sha }}</td>
|
||||
<td>{{c.commit.author.name }}</td>
|
||||
<td>{{c.commit.message}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user