Base formation angular+amélioration layout formations JS
This commit is contained in:
11
javascript/angular/angular.md
Normal file
11
javascript/angular/angular.md
Normal file
@ -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)
|
||||
|
||||
]
|
||||
36
javascript/angular/app-basique.md
Normal file
36
javascript/angular/app-basique.md
Normal file
@ -0,0 +1,36 @@
|
||||
# .cadoles-slide-title[Premier coup d'oeil]
|
||||
|
||||
**Une application basique**
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Calculateur de diamètre et périmètre d'un cercle</title>
|
||||
</head>
|
||||
<!-- Déclaration du point d'entrée et initialisation de l'application -->
|
||||
<body ng-app ng-init="radius=1.0; pi=3.14">
|
||||
|
||||
<h1>Calculateur de diamètre et périmètre d'un cercle</h1>
|
||||
|
||||
<!-- Liaison de données via la directive ng-model -->
|
||||
<label>Approximation de π:</label>
|
||||
<input ng-model="pi" type="number" />
|
||||
|
||||
<br />
|
||||
|
||||
<!-- Champ de récupération du rayon -->
|
||||
<label>Rayon de votre cercle:</label>
|
||||
<input ng-model="radius" type="number" />
|
||||
<hr />
|
||||
|
||||
<!-- Affichage des valeurs calculées -->
|
||||
<b>Diamètre: </b><span>{{ 2 * radius }}</span><br />
|
||||
<b>Périmètre: </b><span>{{ 2 * radius * pi }}</span><br />
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
32
javascript/angular/controleurs.md
Normal file
32
javascript/angular/controleurs.md
Normal file
@ -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
|
||||
<html>
|
||||
<!-- Déclaration du point de montage de notre application" -->
|
||||
<body ng-app="myApp">
|
||||
<div ng-controller="MyAppCtrl">
|
||||
<span>{{ $scope.foo }}</span> <!-- Affiche "Hello World !" -->
|
||||
</div>
|
||||
<!-- Import du framework Angular -->
|
||||
<script src="angular.js"></script>
|
||||
<!-- Déclaration de notre module/application Angular -->
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
|
||||
myApp.controller('MyAppCtrl', ['$scope', function($scope) {
|
||||
|
||||
$scope.foo = 'Hello World !';
|
||||
|
||||
}]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
8
javascript/angular/cover.md
Normal file
8
javascript/angular/cover.md
Normal file
@ -0,0 +1,8 @@
|
||||
class: middle, center
|
||||
|
||||
# .cadoles-blue[Formation AngularJS 1]
|
||||
|
||||
## .cadoles-blue[EOLE]
|
||||
### William Petit
|
||||
<img style="height: 30px" src=../../beamer-skel/img/logo-cadoles-01.png />
|
||||
### 09/10 Avril 2015
|
||||
1
javascript/angular/exercices/.gitignore
vendored
Normal file
1
javascript/angular/exercices/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
29
javascript/angular/exercices/basic-app/index.html
Normal file
29
javascript/angular/exercices/basic-app/index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Calculateur de diamètre et périmètre d'un cercle</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app ng-init="radius=1.0; pi=3.14">
|
||||
|
||||
<h1>Calculateur de diamètre et périmètre d'un cercle</h1>
|
||||
|
||||
<label>Approximation de π:</label>
|
||||
<input ng-model="pi" type="number" step="0.01" />
|
||||
|
||||
<br />
|
||||
|
||||
<!-- Champ de récupération du rayon -->
|
||||
<label>Rayon de votre cercle:</label>
|
||||
<input ng-model="radius" type="number" step="0.1" />
|
||||
<hr />
|
||||
|
||||
<!-- Affichage des valeurs calculées -->
|
||||
<b>Diamètre: </b><span>{{ 2 * radius }}</span><br />
|
||||
<b>Périmètre: </b><span>{{ 2 * radius * pi }}</span><br />
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
14
javascript/angular/exercices/package.json
Normal file
14
javascript/angular/exercices/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
25
javascript/angular/exercices/scope-1/app.js
vendored
Normal file
25
javascript/angular/exercices/scope-1/app.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
*
|
||||
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
|
||||
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
|
||||
* 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('...');
|
||||
};
|
||||
|
||||
}]);
|
||||
31
javascript/angular/exercices/scope-1/index.html
Normal file
31
javascript/angular/exercices/scope-1/index.html
Normal file
@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice manipulation $scope et contrôleur</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
|
||||
<label>Nom</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
|
||||
<label>Prénom</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
|
||||
<label>Age</label>
|
||||
<input type="number" />
|
||||
<br />
|
||||
|
||||
<button>Dire bonjour</button>
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
javascript/angular/exercices/scope-2/app.js
vendored
Normal file
25
javascript/angular/exercices/scope-2/app.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
*
|
||||
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
|
||||
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
|
||||
* 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('...');
|
||||
};
|
||||
|
||||
}]);
|
||||
31
javascript/angular/exercices/scope-2/index.html
Normal file
31
javascript/angular/exercices/scope-2/index.html
Normal file
@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice manipulation $scope et contrôleur</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
|
||||
<label>Nom</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
|
||||
<label>Prénom</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
|
||||
<label>Age</label>
|
||||
<input type="number" />
|
||||
<br />
|
||||
|
||||
<button>Dire bonjour</button>
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
javascript/angular/img/One_Way_Data_Binding.png
Normal file
BIN
javascript/angular/img/One_Way_Data_Binding.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
javascript/angular/img/Two_Way_Data_Binding.png
Normal file
BIN
javascript/angular/img/Two_Way_Data_Binding.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
javascript/angular/img/modeles_client_serveur.png
Normal file
BIN
javascript/angular/img/modeles_client_serveur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
29
javascript/angular/index.html
Normal file
29
javascript/angular/index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Cadoles - Formation Angular</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<link href="../cadoles-theme.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
SLIDES = [
|
||||
'cover',
|
||||
'plan',
|
||||
'spa',
|
||||
'angular',
|
||||
'app-basique',
|
||||
'liaison-donnees-1',
|
||||
'modules',
|
||||
'controleurs',
|
||||
'scope-1',
|
||||
'scope-2',
|
||||
'scope-3',
|
||||
'scope-4',
|
||||
'licence'
|
||||
];
|
||||
</script>
|
||||
<script src="../bower_components/remark/out/remark.js"></script>
|
||||
<script src="../slideshow-bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
23
javascript/angular/liaison-donnees-1.md
Normal file
23
javascript/angular/liaison-donnees-1.md
Normal file
@ -0,0 +1,23 @@
|
||||
# .cadoles-slide-title[La liaison de données]
|
||||
|
||||
.cadoles-left-column[
|
||||
|
||||
**Liaison à sens unique**
|
||||
|
||||
<img src="./img/One_Way_Data_Binding.png" style="max-width:85%" />
|
||||
|
||||
]
|
||||
|
||||
.cadoles-right-column[
|
||||
|
||||
**Liaison à double sens**
|
||||
|
||||
<img src="./img/Two_Way_Data_Binding.png" style="max-width:85%" />
|
||||
|
||||
]
|
||||
|
||||
.cadoles-xs.cadoles-center.cadoles-clearfix[
|
||||
|
||||
Source: [Documentation Angular](https://docs.angularjs.org/guide/databinding)
|
||||
|
||||
]
|
||||
12
javascript/angular/licence.md
Normal file
12
javascript/angular/licence.md
Normal file
@ -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.
|
||||
25
javascript/angular/modules.md
Normal file
25
javascript/angular/modules.md
Normal file
@ -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
|
||||
<html>
|
||||
|
||||
<!-- Déclaration du point de montage de notre application" -->
|
||||
<body ng-app="myApp">
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="angular.js"></script>
|
||||
|
||||
<!-- Déclaration de notre module/application Angular -->
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
40
javascript/angular/plan.md
Normal file
40
javascript/angular/plan.md
Normal file
@ -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
|
||||
5
javascript/angular/questions.md
Normal file
5
javascript/angular/questions.md
Normal file
@ -0,0 +1,5 @@
|
||||
# .cadoles-slide-title[{{ end() }}]
|
||||
|
||||
.cadoles-center[
|
||||
## Des questions ?
|
||||
]
|
||||
35
javascript/angular/scope-1.md
Normal file
35
javascript/angular/scope-1.md
Normal file
@ -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
|
||||
<html>
|
||||
<body ng-app="myApp">
|
||||
|
||||
<div ng-controller="MyAppCtrl">
|
||||
<!-- La directive "ng-click" associe la méthode exposée sur le $scope à l'évènement "onclick" -->
|
||||
<button ng-click="buttonClickHandler()"></button>
|
||||
</div>
|
||||
|
||||
<script src="angular.js"></script>
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
|
||||
myApp.controller('MyAppCtrl', ['$scope', function($scope) {
|
||||
|
||||
$scope.buttonClickHandler = function() {
|
||||
alert('Click !');
|
||||
};
|
||||
|
||||
}]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
31
javascript/angular/scope-2.md
Normal file
31
javascript/angular/scope-2.md
Normal file
@ -0,0 +1,31 @@
|
||||
# .cadoles-slide-title[L'objet $scope (2/4)]
|
||||
|
||||
**Contrôleurs et héritage prototypal des `$scope`**
|
||||
```html
|
||||
<html>
|
||||
<body ng-app="myApp">
|
||||
|
||||
<div ng-controller="ParentCtrl">
|
||||
{{parentProp}} <!-- "Foo" -->
|
||||
<div ng-controller="ChildCtrl">
|
||||
* {{parentProp}} <!-- "Foo" -->
|
||||
{{childProp}} <!-- "Bar" -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="angular.js"></script>
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
|
||||
myApp.controller('ParentCtrl', ['$scope', function($scope) {
|
||||
* $scope.parentProp = "Foo";
|
||||
}]);
|
||||
|
||||
myApp.controller('ChildCtrl', ['$scope', function($scope) {
|
||||
* $scope.childProp = "Bar";
|
||||
}]);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
34
javascript/angular/scope-3.md
Normal file
34
javascript/angular/scope-3.md
Normal file
@ -0,0 +1,34 @@
|
||||
# .cadoles-slide-title[L'objet $scope (3/4)]
|
||||
|
||||
**Communication inter-controlleurs, évènements & propagation**
|
||||
```html
|
||||
<html>
|
||||
<body ng-app="myApp">
|
||||
|
||||
<div ng-controller="ParentCtrl">
|
||||
<div ng-controller="ChildCtrl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="angular.js"></script>
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
|
||||
myApp.controller('ParentCtrl', ['$scope', function($scope) {
|
||||
|
||||
* $scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); });
|
||||
* $scope.$broadcast('parent-event', {data: 'Parent event !'});
|
||||
|
||||
}]);
|
||||
|
||||
myApp.controller('ChildCtrl', ['$scope', function($scope) {
|
||||
|
||||
* $scope.$emit('child-event', {data: 'Child event !'});
|
||||
* $scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); });
|
||||
|
||||
}]);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
29
javascript/angular/scope-4.md
Normal file
29
javascript/angular/scope-4.md
Normal file
@ -0,0 +1,29 @@
|
||||
# .cadoles-slide-title[L'objet $scope (4/4)]
|
||||
|
||||
**Observer les modifications du $scope**
|
||||
```html
|
||||
<html>
|
||||
<body ng-app="myApp">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
<input ng-model="message" />
|
||||
</div>
|
||||
|
||||
<script src="angular.js"></script>
|
||||
<script>
|
||||
var myApp = angular.module('myApp', []);
|
||||
|
||||
myApp.controller('MainCtrl', ['$scope', function($scope) {
|
||||
|
||||
$scope.message = '';
|
||||
|
||||
$scope.$watch('message', function(newVal, oldVal) {
|
||||
console.log('"message" a changé !', newVal, oldVal);
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
19
javascript/angular/spa.md
Normal file
19
javascript/angular/spa.md
Normal file
@ -0,0 +1,19 @@
|
||||
# .cadoles-slide-title[Un changement de paradigme]
|
||||
|
||||
> **S.P.A.** Single Page Application
|
||||
|
||||
.cadoles-center[
|
||||
<img src="./img/modeles_client_serveur.png" style="max-width:65%"/>
|
||||
]
|
||||
|
||||
.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.
|
||||
]
|
||||
Reference in New Issue
Block a user