diff --git a/javascript/angular/angular.md b/javascript/angular/angular.md new file mode 100644 index 0000000..06a89ce --- /dev/null +++ b/javascript/angular/angular.md @@ -0,0 +1,11 @@ +# .cadoles-slide-title[Angular, présentation générale] + +.cadoles-list[ + +- Framework applicatif côté client en Javascript +- Initialement présenté par Google en 2009 +- Licence MIT +- Dernière version stable 1.3.15 (version 2 en alpha) +- Compatible avec l'ensemble des navigateurs, IE compris (jusqu'à IE8) + +] diff --git a/javascript/angular/app-basique.md b/javascript/angular/app-basique.md new file mode 100644 index 0000000..56d6833 --- /dev/null +++ b/javascript/angular/app-basique.md @@ -0,0 +1,36 @@ +# .cadoles-slide-title[Premier coup d'oeil] + +**Une application basique** + +```html + + + + Calculateur de diamètre et périmètre d'un cercle + + + + +

Calculateur de diamètre et périmètre d'un cercle

+ + + + + +
+ + + + +
+ + + Diamètre: {{ 2 * radius }}
+ Périmètre: {{ 2 * radius * pi }}
+ + + + + + +``` diff --git a/javascript/angular/controleurs.md b/javascript/angular/controleurs.md new file mode 100644 index 0000000..dabf07a --- /dev/null +++ b/javascript/angular/controleurs.md @@ -0,0 +1,32 @@ +# .cadoles-slide-title[Les contrôleurs] + +.cadoles-small[ + +- Les contrôleurs permettent de gérer la logique métier dans votre application Angular. +- La définition du périmètre d'action d'un contrôleur est lié à un élément du DOM et se fait via l'utilisation de la directive `ng-controller` + +] + +**Exemple** +```html + + + +
+ {{ $scope.foo }} +
+ + + + + + +``` diff --git a/javascript/angular/cover.md b/javascript/angular/cover.md new file mode 100644 index 0000000..b67e611 --- /dev/null +++ b/javascript/angular/cover.md @@ -0,0 +1,8 @@ +class: middle, center + +# .cadoles-blue[Formation AngularJS 1] + +## .cadoles-blue[EOLE] +### William Petit + +### 09/10 Avril 2015 diff --git a/javascript/angular/exercices/.gitignore b/javascript/angular/exercices/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/javascript/angular/exercices/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/javascript/angular/exercices/basic-app/index.html b/javascript/angular/exercices/basic-app/index.html new file mode 100644 index 0000000..21db578 --- /dev/null +++ b/javascript/angular/exercices/basic-app/index.html @@ -0,0 +1,29 @@ + + + + Calculateur de diamètre et périmètre d'un cercle + + + + +

Calculateur de diamètre et périmètre d'un cercle

+ + + + +
+ + + + +
+ + + Diamètre: {{ 2 * radius }}
+ Périmètre: {{ 2 * radius * pi }}
+ + + + + + diff --git a/javascript/angular/exercices/package.json b/javascript/angular/exercices/package.json new file mode 100644 index 0000000..2f29ff7 --- /dev/null +++ b/javascript/angular/exercices/package.json @@ -0,0 +1,14 @@ +{ + "name": "angular-exercices", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "GPL", + "dependencies": { + "angular": "^1.3.15" + } +} diff --git a/javascript/angular/exercices/scope-1/app.js b/javascript/angular/exercices/scope-1/app.js new file mode 100644 index 0000000..a892389 --- /dev/null +++ b/javascript/angular/exercices/scope-1/app.js @@ -0,0 +1,25 @@ +/* + * Énoncé: + * + * Implémenter le contrôleur MainCtrl et sa fonction sayHello() + * affichant le message "Bonjour . Votre âge est .", + * où les éléments sont remplacés par les données présentes dans le + * formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour". + * + * Attention: des directives Angular sont également nécessaires dans le code HTML. + * + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.nom = null; + $scope.prenom = null; + $scope.age = null; + + $scope.direBonjour = function() { + // alert('...'); + }; + +}]); diff --git a/javascript/angular/exercices/scope-1/index.html b/javascript/angular/exercices/scope-1/index.html new file mode 100644 index 0000000..2c9a6ea --- /dev/null +++ b/javascript/angular/exercices/scope-1/index.html @@ -0,0 +1,31 @@ + + + + Exercice manipulation $scope et contrôleur + + + + +
+ + + +
+ + + +
+ + + +
+ + +
+ + + + + + + diff --git a/javascript/angular/exercices/scope-2/app.js b/javascript/angular/exercices/scope-2/app.js new file mode 100644 index 0000000..a892389 --- /dev/null +++ b/javascript/angular/exercices/scope-2/app.js @@ -0,0 +1,25 @@ +/* + * Énoncé: + * + * Implémenter le contrôleur MainCtrl et sa fonction sayHello() + * affichant le message "Bonjour . Votre âge est .", + * où les éléments sont remplacés par les données présentes dans le + * formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour". + * + * Attention: des directives Angular sont également nécessaires dans le code HTML. + * + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.nom = null; + $scope.prenom = null; + $scope.age = null; + + $scope.direBonjour = function() { + // alert('...'); + }; + +}]); diff --git a/javascript/angular/exercices/scope-2/index.html b/javascript/angular/exercices/scope-2/index.html new file mode 100644 index 0000000..2c9a6ea --- /dev/null +++ b/javascript/angular/exercices/scope-2/index.html @@ -0,0 +1,31 @@ + + + + Exercice manipulation $scope et contrôleur + + + + +
+ + + +
+ + + +
+ + + +
+ + +
+ + + + + + + diff --git a/javascript/angular/img/One_Way_Data_Binding.png b/javascript/angular/img/One_Way_Data_Binding.png new file mode 100644 index 0000000..60e7e3b Binary files /dev/null and b/javascript/angular/img/One_Way_Data_Binding.png differ diff --git a/javascript/angular/img/Two_Way_Data_Binding.png b/javascript/angular/img/Two_Way_Data_Binding.png new file mode 100644 index 0000000..3a9c6d1 Binary files /dev/null and b/javascript/angular/img/Two_Way_Data_Binding.png differ diff --git a/javascript/angular/img/modeles_client_serveur.png b/javascript/angular/img/modeles_client_serveur.png new file mode 100644 index 0000000..166b8b4 Binary files /dev/null and b/javascript/angular/img/modeles_client_serveur.png differ diff --git a/javascript/angular/index.html b/javascript/angular/index.html new file mode 100644 index 0000000..ae48d03 --- /dev/null +++ b/javascript/angular/index.html @@ -0,0 +1,29 @@ + + + + Cadoles - Formation Angular + + + + + + + + + diff --git a/javascript/angular/liaison-donnees-1.md b/javascript/angular/liaison-donnees-1.md new file mode 100644 index 0000000..f58e7dd --- /dev/null +++ b/javascript/angular/liaison-donnees-1.md @@ -0,0 +1,23 @@ +# .cadoles-slide-title[La liaison de données] + +.cadoles-left-column[ + +**Liaison à sens unique** + + + +] + +.cadoles-right-column[ + +**Liaison à double sens** + + + +] + +.cadoles-xs.cadoles-center.cadoles-clearfix[ + +Source: [Documentation Angular](https://docs.angularjs.org/guide/databinding) + +] diff --git a/javascript/angular/licence.md b/javascript/angular/licence.md new file mode 100644 index 0000000..67af496 --- /dev/null +++ b/javascript/angular/licence.md @@ -0,0 +1,12 @@ +# .cadoles-slide-title[Licence] + +Cette œuvre est mise à disposition sous licence [cc-by-nc-sa-2.0](http://creativecommons.org/licenses/by-nc-sa/2.0/fr/) + +- Attribution +- Pas d’Utilisation Commerciale +- Partage dans les Mêmes Conditions 2.0 +- France + +Pour voir une copie de cette licence, visitez http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ +ou écrivez à Creative Commons, 444 Castro Street, Suite 900, +Mountain View, California, 94041, USA. diff --git a/javascript/angular/modules.md b/javascript/angular/modules.md new file mode 100644 index 0000000..2c75e4a --- /dev/null +++ b/javascript/angular/modules.md @@ -0,0 +1,25 @@ +# .cadoles-slide-title[Modules] + +- Un module est une unité logique, fonctionnelle de votre application. +- Une application Angular est un aggrégat d'un ou plusieurs modules, i.e. plusieurs modules distincts peuvent partager la même page via des points de montage différents. +- Un module peut avoir zéro, une ou plusieurs dépendances vers d'autres modules. + +**Exemple** +```html + + + + + + + + + + + + + + +``` diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md new file mode 100644 index 0000000..0fbb18d --- /dev/null +++ b/javascript/angular/plan.md @@ -0,0 +1,40 @@ +# .cadoles-slide-title[Plan] + +- SPA & changement de paradigme +- Angular: présentation générale +- Premier coup d'oeil +- Liaison de données +- Modules +- Contrôleurs et scopes +- Services et injection de dépendances +- Templates et expressions +- Les filtres +- Directives +- Animations +- Tests unitaires +- Tests fonctionnels + +??? + +## Plan complet + +- SPA & changement de paradigme +- Angular: présentation générale +- Premier coup d'oeil +- Liaison de données +- Modules +- Contrôleurs et scopes + - Les contrôleurs + - L'objet `$scope` +- Services et injection de dépendances + - Utilisation de services + - Création de services personalisés +- Templates et expressions + - Itération + - Inclusion de templates + - Manipulation des classes +- Les filtres +- Directives +- Animations +- Tests unitaires +- Tests fonctionnels diff --git a/javascript/angular/questions.md b/javascript/angular/questions.md new file mode 100644 index 0000000..2e69762 --- /dev/null +++ b/javascript/angular/questions.md @@ -0,0 +1,5 @@ +# .cadoles-slide-title[{{ end() }}] + +.cadoles-center[ +## Des questions ? +] diff --git a/javascript/angular/scope-1.md b/javascript/angular/scope-1.md new file mode 100644 index 0000000..d0cc8ff --- /dev/null +++ b/javascript/angular/scope-1.md @@ -0,0 +1,35 @@ +# .cadoles-slide-title[L'objet $scope (1/4)] + +.cadoles-small[ + +- L'object `$scope` est le lien entre la logique métier de votre contrôleur et le DOM. +- C'est le contexte utilisé lors des opérations de liaison de données. +- C'est également le principal médium de gestion des interactions de l'utilisateur avec votre application. + +] + +**Exemple** +```html + + + +
+ + +
+ + + + + +``` diff --git a/javascript/angular/scope-2.md b/javascript/angular/scope-2.md new file mode 100644 index 0000000..c5d87af --- /dev/null +++ b/javascript/angular/scope-2.md @@ -0,0 +1,31 @@ +# .cadoles-slide-title[L'objet $scope (2/4)] + +**Contrôleurs et héritage prototypal des `$scope`** +```html + + + +
+ {{parentProp}} +
+* {{parentProp}} + {{childProp}} +
+
+ + + + + +``` diff --git a/javascript/angular/scope-3.md b/javascript/angular/scope-3.md new file mode 100644 index 0000000..241c3f5 --- /dev/null +++ b/javascript/angular/scope-3.md @@ -0,0 +1,34 @@ +# .cadoles-slide-title[L'objet $scope (3/4)] + +**Communication inter-controlleurs, évènements & propagation** +```html + + + +
+
+
+
+ + + + + +``` diff --git a/javascript/angular/scope-4.md b/javascript/angular/scope-4.md new file mode 100644 index 0000000..cdc8dbd --- /dev/null +++ b/javascript/angular/scope-4.md @@ -0,0 +1,29 @@ +# .cadoles-slide-title[L'objet $scope (4/4)] + +**Observer les modifications du $scope** +```html + + + +
+ +
+ + + + + +``` diff --git a/javascript/angular/spa.md b/javascript/angular/spa.md new file mode 100644 index 0000000..a9d1a60 --- /dev/null +++ b/javascript/angular/spa.md @@ -0,0 +1,19 @@ +# .cadoles-slide-title[Un changement de paradigme] + +> **S.P.A.** Single Page Application + +.cadoles-center[ + +] + +.cadoles-left-column.cadoles-small.cadoles-padded[ +- L'état de l'application est géré côté serveur. +- Le rendu est géré côté serveur. +- Le client se place en simple terminal d'affichage de l'application. +] + +.cadoles-left-right.cadoles-small.cadoles-padded[ +- L'état de l'application est géré côté client. +- Le rendu est géré côté client. +- Le serveur se place en fournisseur de données. +] diff --git a/javascript/base/index.html b/javascript/base/index.html index b59e46b..186662b 100644 --- a/javascript/base/index.html +++ b/javascript/base/index.html @@ -3,23 +3,12 @@ Cadoles - Formation Javascript - - + + diff --git a/javascript/cadoles-theme.css b/javascript/cadoles-theme.css index 54a028b..79bce00 100644 --- a/javascript/cadoles-theme.css +++ b/javascript/cadoles-theme.css @@ -1,4 +1,15 @@ /* Thème Cadoles */ + +body { + font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif'; +} +h1, h2, h3 { + font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif'; + font-weight: normal; +} + +.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; } + a { color: #3080AF; text-decoration: none; @@ -63,10 +74,13 @@ ul > li { display: inline-block; } +.cadoles-center { text-align: center; } .cadoles-blue { color: #5379B4; } .cadoles-clearfix { clear: both; } .cadoles-list > ul { font-size: 1.5em; } .cadoles-list > ul ul { font-size: 0.8em; } +.cadoles-xlarge { font-size: 1.5em; } +.cadoles-large { font-size: 1.2em; } .cadoles-small { font-size: 0.8em; } .cadoles-xs { font-size: 0.7em; } .cadoles-center { text-align: center; } @@ -83,6 +97,10 @@ ul > li { float: right; } +.cadoles-padded { + padding: 10px; +} + .cadoles-right-column:after { visibility: hidden; display: block; diff --git a/javascript/ressources/modeles_client_serveur.ep b/javascript/ressources/modeles_client_serveur.ep new file mode 100644 index 0000000..1f1f620 --- /dev/null +++ b/javascript/ressources/modeles_client_serveur.ep @@ -0,0 +1,210 @@ + +Untitled Page1428307129158_30081264812#ffffff + + + Serveur + ]]> + + + + + + + + + + + + Client]]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Serveur + ]]> + + + + + + + + + + + + Client]]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ]]> + + +
Modèle classique
+ + + Javascript
+ Assets]]> + + +
Layout HTML
+ Javascript
+ Assets
+ + /data.json]]> + + +
GET
/data.json
+ + ]]> + + +
Modèle SPA
+ + \ No newline at end of file diff --git a/javascript/slideshow-bootstrap.js b/javascript/slideshow-bootstrap.js new file mode 100644 index 0000000..fed5e5d --- /dev/null +++ b/javascript/slideshow-bootstrap.js @@ -0,0 +1,44 @@ +(function(SLIDES) { + + var remaining = SLIDES.length; + var slidesContent = []; + + SLIDES.forEach(function(slideName, index) { + fetchSlide(slideName, slideLoadedHandler.bind(null, index)); + }); + + function slideLoadedHandler(index, content) { + remaining--; + slidesContent[index] = content; + if(remaining === 0) { + createSlideShow(); + } + } + + function createSlideShow() { + remark.create({ + source: slidesContent.join('\n---\n'), + highlightStyle: 'github', + highlightLanguage: 'javascript' + }); + } + + function fetchSlide(slideName, cb) { + var req = new XMLHttpRequest(); + req.open('GET', slideName+'.md', true); + req.onload = function (e) { + req.onload = null; + if (req.readyState === 4) { + if (req.status === 200) { + var content = req.responseText.replace(/\r\n/g, '\n'); + return cb(content); + } else { + console.error('Impossible de charger "'+slideName+'.md" !', req.statusText); + return cb(slideName+'.md'); + } + } + }; + req.send(null); + } + +}(SLIDES = SLIDES || []));