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
parent 11b5d82ce4
commit ccfe7374cc
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**