diff --git a/javascript/angular/angular-1.md b/javascript/angular/angular-1.md new file mode 100644 index 0000000..e974999 --- /dev/null +++ b/javascript/angular/angular-1.md @@ -0,0 +1,13 @@ +# .cadoles-slide-title[Qu'est ce qu'Angular ? (2/2)] + +.cadoles-list[ + +- La définition des interfaces et des interactions utilisateurs se fait de manière déclarative via des **directives**, étendant le HTML classique. + + +- La logique métier se situe dans des **services**, liés à votre interface via des **contrôleurs**. + + +- Toutes ces briques de code sont contenues dans des **modules**, unités fonctionnelles, qui constituent votre **application**. + +] diff --git a/javascript/angular/angular.md b/javascript/angular/angular.md index a070176..3e6e4d7 100644 --- a/javascript/angular/angular.md +++ b/javascript/angular/angular.md @@ -1,4 +1,10 @@ -# .cadoles-slide-title[Angular, présentation générale] +# .cadoles-slide-title[Qu'est ce qu'Angular ? (1/2)] + +.cadoles-center[ + + + +] .cadoles-list[ diff --git a/javascript/angular/controleurs.md b/javascript/angular/controleurs.md index 97f8574..2e1d7ac 100644 --- a/javascript/angular/controleurs.md +++ b/javascript/angular/controleurs.md @@ -2,7 +2,7 @@ .cadoles-small[ -- Les contrôleurs permettent de gérer la logique métier dans votre application Angular. +- Les contrôleurs permettent de gérer les intéractions utilisateur et les données d'état/temporaires dans votre application Angular. - Le périmètre d'action d'un contrôleur est lié à un élément du DOM et sa définition s'effectue via l'utilisation de la directive `ng-controller` ] diff --git a/javascript/angular/cover.md b/javascript/angular/cover.md index b67e611..dff11f7 100644 --- a/javascript/angular/cover.md +++ b/javascript/angular/cover.md @@ -1,6 +1,6 @@ class: middle, center -# .cadoles-blue[Formation AngularJS 1] +# .cadoles-blue[Formation AngularJS] ## .cadoles-blue[EOLE] ### William Petit diff --git a/javascript/angular/directives-6.md b/javascript/angular/directives-6.md index 1db80c3..71efb64 100644 --- a/javascript/angular/directives-6.md +++ b/javascript/angular/directives-6.md @@ -22,5 +22,5 @@ ``` -- Les templates sont chargés à la volée, en AJAX +- 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/.gitignore b/javascript/angular/exercices/.gitignore index 3c3629e..a475c9b 100644 --- a/javascript/angular/exercices/.gitignore +++ b/javascript/angular/exercices/.gitignore @@ -1 +1,2 @@ node_modules +*.tar.gz diff --git a/javascript/angular/exercices/include/.solution/app.js b/javascript/angular/exercices/include/.solution/app.js new file mode 100644 index 0000000..f2a9e06 --- /dev/null +++ b/javascript/angular/exercices/include/.solution/app.js @@ -0,0 +1,22 @@ +/* + * Énoncé: + * Implémenter le code nécessaire afin de pouvoir sélectionner via un élément et de sa directive "ng-options" en Angular: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.pages = [ + {label: 'Page 1', template: 'page-1'}, + {label: 'Page 2', template: 'page-2'}, + {label: 'Page 3', template: 'page-3'}, + ]; + + $scope.selectedPage = $scope.pages[0]; + +}]); diff --git a/javascript/angular/exercices/include/.solution/index.html b/javascript/angular/exercices/include/.solution/index.html new file mode 100644 index 0000000..df2af45 --- /dev/null +++ b/javascript/angular/exercices/include/.solution/index.html @@ -0,0 +1,18 @@ + + + + Exercice: inclusion de template + + + + +
+ + +
+ + + + + + diff --git a/javascript/angular/exercices/include/.solution/pages/page-1.html b/javascript/angular/exercices/include/.solution/pages/page-1.html new file mode 100644 index 0000000..e16c4d5 --- /dev/null +++ b/javascript/angular/exercices/include/.solution/pages/page-1.html @@ -0,0 +1,6 @@ +
+

Page 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, metus sit amet ornare porta, orci justo dictum justo, imperdiet ultrices risus nisl in magna. Suspendisse venenatis eros ligula, sed pretium nibh placerat a. Aenean eget iaculis quam. Integer eleifend risus nec sem commodo mattis. Proin pharetra elit ultrices dolor tincidunt, nec mattis ex tristique. Donec et augue sit amet mauris commodo consectetur venenatis sed quam. Nullam in enim diam. Quisque tristique risus sit amet ipsum elementum, et gravida enim molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tortor metus, vehicula vel sagittis id, malesuada non elit. Vivamus nulla sem, tristique a nisl in, laoreet ultrices neque. Nullam feugiat nulla ac augue semper fermentum vel eu risus. Quisque euismod nec nisl a ultrices. Praesent fringilla sed massa nec pulvinar. Suspendisse consequat enim in euismod aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
diff --git a/javascript/angular/exercices/include/.solution/pages/page-2.html b/javascript/angular/exercices/include/.solution/pages/page-2.html new file mode 100644 index 0000000..7859ee5 --- /dev/null +++ b/javascript/angular/exercices/include/.solution/pages/page-2.html @@ -0,0 +1,6 @@ +
+

Page 2

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus urna vel tellus viverra auctor. Curabitur nec sem scelerisque, tempor massa id, dignissim quam. Vestibulum fermentum ipsum sem, non suscipit risus placerat in. Praesent at nisi at risus tincidunt tincidunt nec et tortor. Praesent lacinia nulla quam, quis sagittis dui dictum id. Nullam et neque dignissim, bibendum nibh quis, ornare felis. +

+
diff --git a/javascript/angular/exercices/include/.solution/pages/page-3.html b/javascript/angular/exercices/include/.solution/pages/page-3.html new file mode 100644 index 0000000..86cb0dd --- /dev/null +++ b/javascript/angular/exercices/include/.solution/pages/page-3.html @@ -0,0 +1,6 @@ +
+

Page 3

+

+ Suspendisse dapibus, orci tempor auctor eleifend, erat tellus convallis lectus, in malesuada erat nunc sit amet diam. Suspendisse venenatis fringilla risus quis feugiat. Nulla tellus mi, volutpat quis lacus et, accumsan porttitor magna. Donec lobortis vehicula leo, accumsan malesuada metus. Nulla in pretium sapien, et sagittis lacus. In nulla leo, viverra sit amet dictum mollis, volutpat vitae magna. Nullam mauris metus, gravida iaculis nisl non, luctus vulputate erat. Duis et nisi nec risus laoreet fringilla vel sit amet sapien. Vivamus ac felis diam. +

+
diff --git a/javascript/angular/exercices/include/app.js b/javascript/angular/exercices/include/app.js new file mode 100644 index 0000000..b82e1b3 --- /dev/null +++ b/javascript/angular/exercices/include/app.js @@ -0,0 +1,20 @@ +/* + * Énoncé: + * Implémenter le code nécessaire afin de pouvoir sélectionner via un élément et de sa directive "ng-options" en Angular: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.pages = [ + {label: 'Page 1', template: 'page-1'}, + {label: 'Page 2', template: 'page-2'}, + {label: 'Page 3', template: 'page-3'}, + ]; + +}]); diff --git a/javascript/angular/exercices/include/index.html b/javascript/angular/exercices/include/index.html new file mode 100644 index 0000000..513977f --- /dev/null +++ b/javascript/angular/exercices/include/index.html @@ -0,0 +1,17 @@ + + + + Exercice: inclusion de template + + + + +
+ +
+ + + + + + diff --git a/javascript/angular/exercices/include/pages/page-1.html b/javascript/angular/exercices/include/pages/page-1.html new file mode 100644 index 0000000..e16c4d5 --- /dev/null +++ b/javascript/angular/exercices/include/pages/page-1.html @@ -0,0 +1,6 @@ +
+

Page 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, metus sit amet ornare porta, orci justo dictum justo, imperdiet ultrices risus nisl in magna. Suspendisse venenatis eros ligula, sed pretium nibh placerat a. Aenean eget iaculis quam. Integer eleifend risus nec sem commodo mattis. Proin pharetra elit ultrices dolor tincidunt, nec mattis ex tristique. Donec et augue sit amet mauris commodo consectetur venenatis sed quam. Nullam in enim diam. Quisque tristique risus sit amet ipsum elementum, et gravida enim molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tortor metus, vehicula vel sagittis id, malesuada non elit. Vivamus nulla sem, tristique a nisl in, laoreet ultrices neque. Nullam feugiat nulla ac augue semper fermentum vel eu risus. Quisque euismod nec nisl a ultrices. Praesent fringilla sed massa nec pulvinar. Suspendisse consequat enim in euismod aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
diff --git a/javascript/angular/exercices/include/pages/page-2.html b/javascript/angular/exercices/include/pages/page-2.html new file mode 100644 index 0000000..7859ee5 --- /dev/null +++ b/javascript/angular/exercices/include/pages/page-2.html @@ -0,0 +1,6 @@ +
+

Page 2

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus urna vel tellus viverra auctor. Curabitur nec sem scelerisque, tempor massa id, dignissim quam. Vestibulum fermentum ipsum sem, non suscipit risus placerat in. Praesent at nisi at risus tincidunt tincidunt nec et tortor. Praesent lacinia nulla quam, quis sagittis dui dictum id. Nullam et neque dignissim, bibendum nibh quis, ornare felis. +

+
diff --git a/javascript/angular/exercices/include/pages/page-3.html b/javascript/angular/exercices/include/pages/page-3.html new file mode 100644 index 0000000..86cb0dd --- /dev/null +++ b/javascript/angular/exercices/include/pages/page-3.html @@ -0,0 +1,6 @@ +
+

Page 3

+

+ Suspendisse dapibus, orci tempor auctor eleifend, erat tellus convallis lectus, in malesuada erat nunc sit amet diam. Suspendisse venenatis fringilla risus quis feugiat. Nulla tellus mi, volutpat quis lacus et, accumsan porttitor magna. Donec lobortis vehicula leo, accumsan malesuada metus. Nulla in pretium sapien, et sagittis lacus. In nulla leo, viverra sit amet dictum mollis, volutpat vitae magna. Nullam mauris metus, gravida iaculis nisl non, luctus vulputate erat. Duis et nisi nec risus laoreet fringilla vel sit amet sapien. Vivamus ac felis diam. +

+
diff --git a/javascript/angular/exercices/todos/.solution/img/vanilla.png b/javascript/angular/exercices/todos/.solution/img/vanilla.png new file mode 100644 index 0000000..3f45426 Binary files /dev/null and b/javascript/angular/exercices/todos/.solution/img/vanilla.png differ diff --git a/javascript/angular/exercices/todos/.solution/index.html b/javascript/angular/exercices/todos/.solution/index.html new file mode 100644 index 0000000..04e01f2 --- /dev/null +++ b/javascript/angular/exercices/todos/.solution/index.html @@ -0,0 +1,43 @@ + + + + + + +
+

(Not) Vanilla Todos

+
+ + + + + + + + + + + + + + + + + + + + + +
Mes tâchesActions
Pas de tâches pour le moment !
{{todo.text}}Supprimer
+ +
+
+
+ + + + diff --git a/javascript/angular/exercices/todos/.solution/style.css b/javascript/angular/exercices/todos/.solution/style.css new file mode 100644 index 0000000..264b49f --- /dev/null +++ b/javascript/angular/exercices/todos/.solution/style.css @@ -0,0 +1,62 @@ + +body { + font-family: "Droid Sans", "sans-serif"; + font-size: 16px; + background-color: #F8F8F8; + color: #333; +} + +.container { + margin: 0 auto; + width: 80%; +} + +.logo { + transform: rotate(45deg); + height: 40px; + display: inline-block; + vertical-align: bottom; + margin-right: 5px; +} + +#vanilla-todos { + width: 100%; +} + +#vanilla-todos table { + width: 100%; + text-align: left; + border-collapse: collapse; +} + +#vanilla-todos tr { + height: 40px; +} + +#vanilla-todos tr:hover { + background-color: #f4F4F4; +} + +#vanilla-todos tbody td { + border-bottom: 1px solid #CCC; +} + +#vanilla-todos tbody tr:last-child td { + border-bottom: none; +} + +#vanilla-todos table td:last-child { + width: 100px; +} + +#vanilla-todos .no-todo { + text-align: center; +} + +#vanilla-todos input[type="text"] { + border-radius: 3px; + border: 1px solid #ccc; + height: 40px; + padding: 3px 10px; + width: 100%; +} diff --git a/javascript/angular/exercices/todos/.solution/todos.js b/javascript/angular/exercices/todos/.solution/todos.js new file mode 100644 index 0000000..7d9d207 --- /dev/null +++ b/javascript/angular/exercices/todos/.solution/todos.js @@ -0,0 +1,33 @@ +var Todos = angular.module('Todos', []); + +Todos.controller('MainCtrl', ['$scope', '$window', function($scope, $window) { + + $scope.todos = _loadTodos(); + $scope.newTodo = ''; + + $scope.newTodoKeydownHandler = function(evt) { + if(evt.keyCode === 13) { + $scope.todos.push({ + text: $scope.newTodo + }); + $scope.newTodo = ''; + _saveTodos($scope.todos); + } + }; + + $scope.removeTodoByIndex = function(index) { + $scope.todos.splice(index, 1); + _saveTodos($scope.todos); + }; + + function _loadTodos() { + var todosStr = $window.localStorage.getItem('notVanillaTodos.todos'); + return JSON.parse(todosStr || '[]'); + } + + function _saveTodos(todos) { + var todosStr = JSON.stringify(todos); + $window.localStorage.setItem('notVanillaTodos.todos', todosStr); + } + +}]); diff --git a/javascript/angular/exercices/todos/img/vanilla.png b/javascript/angular/exercices/todos/img/vanilla.png new file mode 100644 index 0000000..3f45426 Binary files /dev/null and b/javascript/angular/exercices/todos/img/vanilla.png differ diff --git a/javascript/angular/exercices/todos/index.html b/javascript/angular/exercices/todos/index.html new file mode 100644 index 0000000..99b3ce0 --- /dev/null +++ b/javascript/angular/exercices/todos/index.html @@ -0,0 +1,34 @@ + + + + + + +
+

(Not) Vanilla Todos

+
+ + + + + + + + + + + + + + + +
Mes tâchesActions
+ + +
+
+
+ + + + diff --git a/javascript/angular/exercices/todos/style.css b/javascript/angular/exercices/todos/style.css new file mode 100644 index 0000000..264b49f --- /dev/null +++ b/javascript/angular/exercices/todos/style.css @@ -0,0 +1,62 @@ + +body { + font-family: "Droid Sans", "sans-serif"; + font-size: 16px; + background-color: #F8F8F8; + color: #333; +} + +.container { + margin: 0 auto; + width: 80%; +} + +.logo { + transform: rotate(45deg); + height: 40px; + display: inline-block; + vertical-align: bottom; + margin-right: 5px; +} + +#vanilla-todos { + width: 100%; +} + +#vanilla-todos table { + width: 100%; + text-align: left; + border-collapse: collapse; +} + +#vanilla-todos tr { + height: 40px; +} + +#vanilla-todos tr:hover { + background-color: #f4F4F4; +} + +#vanilla-todos tbody td { + border-bottom: 1px solid #CCC; +} + +#vanilla-todos tbody tr:last-child td { + border-bottom: none; +} + +#vanilla-todos table td:last-child { + width: 100px; +} + +#vanilla-todos .no-todo { + text-align: center; +} + +#vanilla-todos input[type="text"] { + border-radius: 3px; + border: 1px solid #ccc; + height: 40px; + padding: 3px 10px; + width: 100%; +} diff --git a/javascript/angular/exercices/todos/todos.js b/javascript/angular/exercices/todos/todos.js new file mode 100644 index 0000000..eabfd43 --- /dev/null +++ b/javascript/angular/exercices/todos/todos.js @@ -0,0 +1,19 @@ +var Todos = angular.module('Todos', []); + +Todos.controller('MainCtrl', ['$scope', '$window', function($scope, $window) { + + $scope.todos = _loadTodos(); + + // ??? + + function _loadTodos() { + var todosStr = $window.localStorage.getItem('notVanillaTodos.todos'); + return JSON.parse(todosStr || '[]'); + } + + function _saveTodos(todos) { + var todosStr = JSON.stringify(todos); + $window.localStorage.setItem('notVanillaTodos.todos', todosStr); + } + +}]); diff --git a/javascript/angular/img/AngularJS-large.png b/javascript/angular/img/AngularJS-large.png new file mode 100644 index 0000000..e71a01f Binary files /dev/null and b/javascript/angular/img/AngularJS-large.png differ diff --git a/javascript/angular/index.html b/javascript/angular/index.html index 34581c9..056a954 100644 --- a/javascript/angular/index.html +++ b/javascript/angular/index.html @@ -12,6 +12,7 @@ 'plan', 'spa', 'angular', + 'angular-1', 'app-basique', 'liaison-donnees-1', 'modules', diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md index 4c28d45..2990f99 100644 --- a/javascript/angular/plan.md +++ b/javascript/angular/plan.md @@ -1,7 +1,7 @@ # .cadoles-slide-title[Plan] - SPA & changement de paradigme -- Angular: présentation générale +- Qu'est ce qu'Angular ? - Premier coup d'oeil - Liaison de données - Modules @@ -12,9 +12,10 @@ - Les filtres - Création de directives - Animations -- Organisation du projet +- Organisation d'un projet - Tests unitaires - Tests fonctionnels +- Mise en pratique ??? @@ -41,6 +42,7 @@ - Les filtres (exercice filtres) - Création de directives - Animations -- Organisation du projet +- Organisation d'un projet - Tests unitaires - Tests fonctionnels +- Mise en pratique diff --git a/javascript/angular/routage-1.md b/javascript/angular/routage-1.md new file mode 100644 index 0000000..a13bb60 --- /dev/null +++ b/javascript/angular/routage-1.md @@ -0,0 +1,10 @@ +# .cadoles-slide-title[Routage (1/)] + +**Le "routage" côté client** + +.cadoles-list[ + +- Se base sur l'API "History" HTML5 (pushState) ou les ancres "#" +- Permet de simuler la navigation classique d'un navigateur, avec la gestion de l'historique sans besoin obligatoire de requête au serveur. + +] diff --git a/javascript/angular/scope-1.md b/javascript/angular/scope-1.md index 536780d..b3409e9 100644 --- a/javascript/angular/scope-1.md +++ b/javascript/angular/scope-1.md @@ -22,15 +22,14 @@