diff --git a/javascript/angular/controleurs.md b/javascript/angular/controleurs.md index 2e1d7ac..3bd4bd3 100644 --- a/javascript/angular/controleurs.md +++ b/javascript/angular/controleurs.md @@ -13,7 +13,7 @@
- {{ $scope.foo }} + {{ foo }}
diff --git a/javascript/angular/directives-1.md b/javascript/angular/directives-1.md index f4ccb6d..3e7ce91 100644 --- a/javascript/angular/directives-1.md +++ b/javascript/angular/directives-1.md @@ -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 diff --git a/javascript/angular/directives-2.md b/javascript/angular/directives-2.md index 188af92..5eea1f5 100644 --- a/javascript/angular/directives-2.md +++ b/javascript/angular/directives-2.md @@ -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 diff --git a/javascript/angular/directives-3.md b/javascript/angular/directives-3.md index edb4a24..29f3d69 100644 --- a/javascript/angular/directives-3.md +++ b/javascript/angular/directives-3.md @@ -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 -
- +
+ + Caché ! + Affiché ! + +
+ Affiché ! + Caché ! + Caché ! +
+
- ``` diff --git a/javascript/angular/directives-4.md b/javascript/angular/directives-4.md index c9b6444..0e4b034 100644 --- a/javascript/angular/directives-4.md +++ b/javascript/angular/directives-4.md @@ -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 -
- Caché ! - Affiché ! + +
-
- Affiché ! - Caché ! - Caché ! -
+ Rouge et large + + Bleu
diff --git a/javascript/angular/directives-5.md b/javascript/angular/directives-5.md index 362479d..8ea095a 100644 --- a/javascript/angular/directives-5.md +++ b/javascript/angular/directives-5.md @@ -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 + + + - - - -
- - Rouge et large - - Bleu - -
+ + + + + +
+
+ +
+
``` + +- 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 diff --git a/javascript/angular/directives-6.md b/javascript/angular/directives-6.md deleted file mode 100644 index ba1e314..0000000 --- a/javascript/angular/directives-6.md +++ /dev/null @@ -1,26 +0,0 @@ -# .cadoles-slide-title[Les directives de base (6/6)] - -**Inclusion de template avec la directive `ng-include`** - -```html - - - - - - - - - - - - -
-
- -
-
-``` - -- 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 diff --git a/javascript/angular/exercices/filtres-1/.solution/app.js b/javascript/angular/exercices/filtres-1/.solution/app.js new file mode 100644 index 0000000..32a84de --- /dev/null +++ b/javascript/angular/exercices/filtres-1/.solution/app.js @@ -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 = ''+needle+''; + return $sce.trustAsHtml(input.replace(needle, html)); + + }; + +}]); diff --git a/javascript/angular/exercices/filtres-1/.solution/index.html b/javascript/angular/exercices/filtres-1/.solution/index.html new file mode 100644 index 0000000..2222866 --- /dev/null +++ b/javascript/angular/exercices/filtres-1/.solution/index.html @@ -0,0 +1,46 @@ + + + + Exercice: Utilisation des filtres + + + + +
+ +

Commits du dépôt torvalds/linux sur Github

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
DateSHAAuthorMessage
{{c.commit.author.date | date:'dd-mm-yyyy' }}{{c.sha | limitTo:10 }}{{c.commit.author.name }}
+ +
+ + + + + + diff --git a/javascript/angular/exercices/filtres-1/app.js b/javascript/angular/exercices/filtres-1/app.js new file mode 100644 index 0000000..024cdc7 --- /dev/null +++ b/javascript/angular/exercices/filtres-1/app.js @@ -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; + }) + ; + +}]); diff --git a/javascript/angular/exercices/filtres-1/index.html b/javascript/angular/exercices/filtres-1/index.html new file mode 100644 index 0000000..5114709 --- /dev/null +++ b/javascript/angular/exercices/filtres-1/index.html @@ -0,0 +1,46 @@ + + + + Exercice: Utilisation des filtres + + + + +
+ +

Commits du dépôt torvalds/linux sur Github

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
DateSHAAuthorMessage
{{c.commit.author.date }}{{c.sha }}{{c.commit.author.name }}{{c.commit.message}}
+ +
+ + + + + + diff --git a/javascript/angular/filtres-1.md b/javascript/angular/filtres-1.md new file mode 100644 index 0000000..9d4e690 --- /dev/null +++ b/javascript/angular/filtres-1.md @@ -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 +
+ + + + {{ myStr | uppercase }} + + + {{ myStr | uppercase | lowercase }} + + + {{ myArr | limitTo:2 }} + +
+``` diff --git a/javascript/angular/filtres-2.md b/javascript/angular/filtres-2.md new file mode 100644 index 0000000..9da2c69 --- /dev/null +++ b/javascript/angular/filtres-2.md @@ -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'] + + }]) +; +``` diff --git a/javascript/angular/filtres-3.md b/javascript/angular/filtres-3.md new file mode 100644 index 0000000..36d2b1a --- /dev/null +++ b/javascript/angular/filtres-3.md @@ -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 +
+ + {{ myArr | join:'/' }} + +
+``` diff --git a/javascript/angular/fin.md b/javascript/angular/fin.md deleted file mode 100644 index d3c32ce..0000000 --- a/javascript/angular/fin.md +++ /dev/null @@ -1,7 +0,0 @@ -# .cadoles-slide-title[Fin] - -.cadoles-center[ - -# Fin de la première partie - -] diff --git a/javascript/angular/index.html b/javascript/angular/index.html index 3eb2443..8ee1838 100644 --- a/javascript/angular/index.html +++ b/javascript/angular/index.html @@ -28,8 +28,11 @@ 'directives-3', 'directives-4', 'directives-5', - 'directives-6', - 'fin' + 'filtres-1', + 'filtres-2', + 'filtres-3', + 'questions', + 'licence' ]; diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md index 2990f99..f4369dc 100644 --- a/javascript/angular/plan.md +++ b/javascript/angular/plan.md @@ -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 diff --git a/javascript/angular/scope-1.md b/javascript/angular/scope-1.md index b3409e9..c1710ca 100644 --- a/javascript/angular/scope-1.md +++ b/javascript/angular/scope-1.md @@ -22,7 +22,7 @@