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

Corrections slides

This commit is contained in:
William Petit 2015-04-09 20:36:17 +02:00
parent ccfe7374cc
commit e0ad7f004d
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 !'