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

Formation Angular: exos supplémentaires

This commit is contained in:
William Petit 2015-04-09 01:03:35 +02:00 committed by Benjamin Bohard
parent 7df3129ace
commit 3fe0bcd45d
17 changed files with 260 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/angular/directives-1.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (1/)] # .cadoles-slide-title[Les directives de base (1/6)]
**Itération avec ng-repeat: sur un tableau** **Itération avec ng-repeat: sur un tableau**
```html ```html

2
javascript/angular/directives-2.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (2/)] # .cadoles-slide-title[Les directives de base (2/6)]
**Itération avec ng-repeat: sur un objet** **Itération avec ng-repeat: sur un objet**
```html ```html

2
javascript/angular/directives-3.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (3/)] # .cadoles-slide-title[Les directives de base (3/6)]
**Itération avec ng-repeat: sur un objet** **Itération avec ng-repeat: sur un objet**
```html ```html

2
javascript/angular/directives-4.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (4/)] # .cadoles-slide-title[Les directives de base (4/6)]
**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`** **Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
```html ```html

2
javascript/angular/directives-5.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (5/)] # .cadoles-slide-title[Les directives de base (5/6)]
**Modification dynamique du style: `ng-class`** **Modification dynamique du style: `ng-class`**
```html ```html

2
javascript/angular/directives-6.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les directives de base (6/)] # .cadoles-slide-title[Les directives de base (6/6)]
**Inclusion de template avec la directive `ng-include`** **Inclusion de template avec la directive `ng-include`**

19
javascript/angular/exercices/routage/app.js vendored Normal file
View File

@ -0,0 +1,19 @@
/*
* Énoncé:
*
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.nom = null;
$scope.prenom = null;
$scope.age = null;
$scope.sayHello = function() {
// alert('...');
};
}]);

31
javascript/angular/exercices/routage/index.html Normal file
View 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>

76
javascript/angular/exercices/scope-2/.solution/app.js Normal file
View File

@ -0,0 +1,76 @@
/*
* Énoncé:
*
* Implémenter les contrôleurs MainCtrl, ACtrl et BCtrl afin que les modifications des champs
* dans le controleur MainCtrl soient répliqués dans les champs respectifs de ACtrl et BCtrl,
* et inversement.
*
* Indices:
* - Attention à l'héritage des $scope
* - Penser à l'utilisation de $broadcast, $emit et $watch
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.numberA = 5;
$scope.numberB = 2;
$scope.$watch('numberA', function(newVal) {
$scope.$broadcast('numberAChanged', {value: newVal});
});
$scope.$watch('numberB', function(newVal) {
$scope.$broadcast('numberBChanged', {value: newVal});
});
$scope.$on('numberAChanged', function(evt, data) {
$scope.numberA = data.value;
});
$scope.$on('numberBChanged', function(evt, data) {
$scope.numberB = data.value;
});
}]);
Exo.controller('ACtrl', ['$scope', function($scope) {
$scope.$watch('numberA', function(newVal) {
$scope.$emit('numberAChanged', {value: newVal});
});
$scope.$watch('numberB', function(newVal) {
$scope.$emit('numberBChanged', {value: newVal});
});
$scope.$on('numberAChanged', function(evt, data) {
$scope.numberA = data.value;
});
$scope.$on('numberBChanged', function(evt, data) {
$scope.numberB = data.value;
});
}]);
Exo.controller('BCtrl', ['$scope', function($scope) {
$scope.$watch('numberA', function(newVal) {
$scope.$emit('numberAChanged', {value: newVal});
});
$scope.$watch('numberB', function(newVal) {
$scope.$emit('numberBChanged', {value: newVal});
});
$scope.$on('numberAChanged', function(evt, data) {
$scope.numberA = data.value;
});
$scope.$on('numberBChanged', function(evt, data) {
$scope.numberB = data.value;
});
}]);

35
javascript/angular/exercices/scope-2/.solution/index.html Normal file
View File

@ -0,0 +1,35 @@
<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">
<h2>Contrôleur Parent</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
<hr />
<div ng-controller="ACtrl">
<h2>Contrôleur A</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
</div>
<hr />
<div ng-controller="BCtrl">
<h2>Contrôleur B</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

29
javascript/angular/exercices/scope-2/app.js vendored Normal file
View File

@ -0,0 +1,29 @@
/*
* Énoncé:
*
* Implémenter les contrôleurs MainCtrl, ACtrl et BCtrl afin que les modifications des propriétés numberA & numberB
* dans le controleur MainCtrl soient répliquées dans les champs respectifs de ACtrl et BCtrl,
* et inversement.
*
* Indices:
* - Attention à l'héritage des $scope
* - Penser à l'utilisation de $broadcast, $emit et $watch
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.numberA = 5;
$scope.numberB = 2;
}]);
Exo.controller('ACtrl', ['$scope', function($scope) {
}]);
Exo.controller('BCtrl', ['$scope', function($scope) {
}]);

35
javascript/angular/exercices/scope-2/index.html Normal file
View File

@ -0,0 +1,35 @@
<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">
<h2>Contrôleur Parent</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
<hr />
<div ng-controller="ACtrl">
<h2>Contrôleur A</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
</div>
<hr />
<div ng-controller="BCtrl">
<h2>Contrôleur B</h2>
<label>Nombre A</label><input type="number" ng-model="numberA"/><br />
<label>Nombre B</label><input type="number" ng-model="numberB"/>
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

3
javascript/angular/index.html
View File

@ -29,8 +29,7 @@
'directives-4', 'directives-4',
'directives-5', 'directives-5',
'directives-6', 'directives-6',
'fin', 'fin'
'licence'
]; ];
</script> </script>
<script src="../bower_components/remark/out/remark.js"></script> <script src="../bower_components/remark/out/remark.js"></script>

28
javascript/angular/routage-1.md
View File

@ -1,10 +1,28 @@
# .cadoles-slide-title[Routage (1/)] # .cadoles-slide-title[Routage dans le navigateur (1/)]
**Le "routage" côté client** **Différences entre la navigation classique et la navigation côté client**
.cadoles-left-column[
**Navigation classique**
.cadoles-list[ .cadoles-center[
`GET / -> GET /page1 -> GET /page2 -> etc`
]
- Se base sur l'API "History" HTML5 (pushState) ou les ancres "#" - Chaque page est renvoyée par le serveur.
- Permet de simuler la navigation classique d'un navigateur, avec la gestion de l'historique sans besoin obligatoire de requête au serveur. - Le serveur gère l'association URL/contenu.
]
.cadoles-right-column[
**Navigation côté navigateur**
.cadoles-center[
`GET / -> #page1 -> #page2 -> etc`
]
- Une fois la première requête effectuée, le navigateur utilise les ancres (\#) pour simuler la navigation de page en page.
- Javascript réagit à ces changements du "hash" de l'URL pour modifier la page.
- Le client (Javascript/navigateur) gère l'association URL+hash/contenu.
] ]

3
javascript/angular/routage-2.md Normal file
View File

@ -0,0 +1,3 @@
# .cadoles-slide-title[Routage dans le navigateur (2/)]
**Le module `ngRoute`**

2
javascript/angular/services-1.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les services (1/)] # .cadoles-slide-title[Les services (1/2)]
- Instanciés à la volée - Instanciés à la volée
- En mode "singleton" _(une seule instance pour l'ensemble de l'application)_ - En mode "singleton" _(une seule instance pour l'ensemble de l'application)_

2
javascript/angular/services-2.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Les services (2/)] # .cadoles-slide-title[Les services (2/2)]
**Création de services** **Création de services**