Cadoles/formations
20
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Corrections slides

Browse Source
This commit is contained in:
William Petit 2015-04-09 20:36:17 +02:00 committed by Benjamin Bohard
parent 3fe0bcd45d
commit 84381980f7
18 changed files with 319 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/angular/controleurs.md
View File

@ -13,7 +13,7 @@
<!-- Déclaration du point de montage de notre application" -->
<body ng-app="myApp">
<div ng-controller="MyAppCtrl">
<span>{{ $scope.foo }}</span> <!-- Affiche "Hello World !" -->
<span>{{ foo }}</span> <!-- Affiche "Hello World !" -->
</div>
<!-- Import du framework Angular -->
<script src="angular.js"></script>

2
javascript/angular/directives-1.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (1/6)]
# .cadoles-slide-title[Les directives de base (1/5)]
**Itération avec ng-repeat: sur un tableau**
```html

2
javascript/angular/directives-2.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (2/6)]
# .cadoles-slide-title[Les directives de base (2/5)]
**Itération avec ng-repeat: sur un objet**
```html

33
javascript/angular/directives-3.md
View File

@ -1,29 +1,22 @@
# .cadoles-slide-title[Les directives de base (3/6)]
# .cadoles-slide-title[Les directives de base (3/5)]
**Itération avec ng-repeat: sur un objet**
**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="(key, val) in myObj">
<span>Clé: {{ key }}</span><span>Valeur: {{ value }}</span>
</li>
</ul>
<div ng-controller="MainCtrl" ng-init="myTest = true; myVal = 'foo'">
<span ng-hide="myTest === true">Caché !</span>
<span ng-show="myTest === true">Affiché !</span>
<div ng-switch="myVar">
<span ng-switch-when="foo">Affiché !</span>
<span ng-switch-when="bar">Caché !</span>
<span ng-switch-default>Caché !</span>
</div>
</div>
<script src="angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.myObj = [
'prop1': 'Foo',
'prop2': 'Bar'
'prop3': 'Baz'
];
}]);
</script>
</body>
</html>
```

21
javascript/angular/directives-4.md
View File

@ -1,19 +1,20 @@
# .cadoles-slide-title[Les directives de base (4/6)]
# .cadoles-slide-title[Les directives de base (4/5)]
**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
**Modification dynamique du style: `ng-class`**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl" ng-init="myTest = true; myVal = 'foo'">
<span ng-hide="myTest === true">Caché !</span>
<span ng-show="myTest === true">Affiché !</span>
<style>
.red { color: red; }
.blue { color: blue; }
.xxl { font-size: 50px; font-weight: bold; }
</style>
<div ng-controller="MainCtrl" ng-init="iLoveBlue=true; iLoveRed=false; myClasses=['red', 'xxl']">
<div ng-switch="myTest === true">
<span ng-switch-when="foo">Affiché !</span>
<span ng-switch-when="bar">Caché !</span>
<span ng-switch-default="baz">Caché !</span>
</div>
<span ng-class="myClasses">Rouge et large</span>
<span ng-class="{'red': iLoveRed, 'blue': iLoveBlue}">Bleu</span>
</div>
<script src="angular.js"></script>

35
javascript/angular/directives-5.md
View File

@ -1,23 +1,26 @@
# .cadoles-slide-title[Les directives de base (5/6)]
# .cadoles-slide-title[Les directives de base (5/5)]
**Inclusion de template avec la directive `ng-include`**
**Modification dynamique du style: `ng-class`**
```html
<!-- Fichier index.html -->
<html>
<body ng-app="myApp">
<style>
.red { color: red; }
.blue { color: blue; }
.xxl { font-size: 50px; font-weight: bold; }
</style>
<div ng-controller="MainCtrl" ng-init="iLoveBlue=true; iLoveRed=false; myClasses=['red', 'xxl']">
<span ng-class="myClasses">Rouge et large</span>
<span ng-class="{'red': iLoveRed, 'blue': iLoveBlue}">Bleu</span>
</div>
<body ng-app>
<ng-include src="'template1.html'"></ng-include>
<script src="angular.js"></script>
</body>
</html>
<!-- Fichier template1.html -->
<div>
<div ng-controller="MyCtrl">
<!-- ... -->
</div>
</div>
```
- Les templates peuvent être chargés dynamiquement, à la volée.
- Il est possible de les précompiler et de les inclures sous leur forme Javascript lors de la mise en production

26
javascript/angular/directives-6.md
View File

@ -1,26 +0,0 @@
# .cadoles-slide-title[Les directives de base (6/6)]
**Inclusion de template avec la directive `ng-include`**
```html
<!-- Fichier index.html -->
<html>
<body ng-app>
<ng-include="'template1.html'"></ng-include>
<script src="angular.js"></script>
</body>
</html>
<!-- Fichier template1.html -->
<div>
<div ng-controller="MyCtrl">
<!-- ... -->
</div>
</div>
```
- Les templates peuvent être chargés dynamiquement, à la volée.
- Il est possible de les précompiler et de les inclures sous leur forme Javascript lors de la mise en production

58
javascript/angular/exercices/filtres-1/.solution/app.js Normal file
View 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
View 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
View 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
View 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>

22
javascript/angular/filtres-1.md Normal file
View File

@ -0,0 +1,22 @@
# .cadoles-slide-title[Les filtres (1/)]
- Les filtres permettent de formatter le résultat d'une expression afin de l'afficher à l'utilisateur.
- Ils peuvent être utilisés dans les templates, dans les contrôleurs ou dans les services.
- Angular fournit une liste de [filtres par défaut](https://code.angularjs.org/1.3.15/docs/api/ng/filter), mais il est possible également de créer ses propres filtres.
**Usage d'un filtre dans les expressions**
```html
<div ng-app ng-init="myStr = 'Hello World !'; myArr = ['item 1', 'item 2', 'item 3']">
<!-- Syntaxe: expression | filtre[:arg1:arg2:...] -->
<span>{{ myStr | uppercase }}</span> <!-- "HELLO WORD !" -->
<!-- On peut chaîner les filtres -->
<span>{{ myStr | uppercase | lowercase }}</span> <!-- "hello world !" -->
<!-- On peut l'utiliser sur différents types de valeurs, par exemple un tableau -->
<span>{{ myArr | limitTo:2 }}</span> <!-- ['item 1', 'item 2'] -->
</div>
```

16
javascript/angular/filtres-2.md Normal file
View File

@ -0,0 +1,16 @@
# .cadoles-slide-title[Les filtres (2/)]
**Exemple d'usage dans un contrôleur**
```js
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {
var myArr = ['item 1', 'item 2', 'item 3'];
// Usage: result = $filter(filterId, input, arg1, arg2, ...);
console.log( $filter('limitTo', myArr, 2) ); // -> ['item 1', 'item 2']
}])
;
```

32
javascript/angular/filtres-3.md Normal file
View File

@ -0,0 +1,32 @@
# .cadoles-slide-title[Les filtres (3/)]
**Création d'un filtre personnalisé**
```js
// Création du filtre
angular.module('myApp', []).filter('join', function() {
// Fonction de formatage
return function(input, separator) {
// Utilisation d'une valeur par défaut si le séparateur n'est pas défini
separator = separator || ',';
// Si l'entrée n'est pas un tableau, on retourne celle ci sans modification
if( !angular.isArray(input) ) return input;
// On retourne le tableau sous la forme d'une chaine de caractères,
// ses éléments joints par le séparateur
return input.join(separator);
};
});
```
**Usage**
```html
<div ng-app="myApp" ng-init="myArr = ['item 1', 'item 2', 'item 3']">
{{ myArr | join:'/' }}
</div>
```

7
javascript/angular/fin.md
View File

@ -1,7 +0,0 @@
# .cadoles-slide-title[Fin]
.cadoles-center[
# Fin de la première partie
]

7
javascript/angular/index.html
View File

@ -28,8 +28,11 @@
'directives-3',
'directives-4',
'directives-5',
'directives-6',
'fin'
'filtres-1',
'filtres-2',
'filtres-3',
'questions',
'licence'
];
</script>
<script src="../bower_components/remark/out/remark.js"></script>

2
javascript/angular/plan.md
View File

@ -8,10 +8,10 @@
- Contrôleurs et scopes
- Services et injection de dépendances
- Les directives de base
- Routage avec le module `ngRoute`
- Les filtres
- Création de directives
- Animations
- Routage avec le module `ngRoute`
- Organisation d'un projet
- Tests unitaires
- Tests fonctionnels

2
javascript/angular/scope-1.md
View File

@ -22,7 +22,7 @@
<script src="angular.js"></script>
<script>
angular.module('myApp', []);
angular.module('myApp', [])
.controller('MyAppCtrl', ['$scope', function($scope) {
$scope.myValue = 'Foo !'