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

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**
```html

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**
```html

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**
```html

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`**
```html

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`**
```html

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`**

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('...');
};
}]);

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>

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;
});
}]);

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>

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) {
}]);

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>

View File

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

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 "#"
- Permet de simuler la navigation classique d'un navigateur, avec la gestion de l'historique sans besoin obligatoire de requête au serveur.
- Chaque page est renvoyée par le 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.
]

View File

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

View File

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

View File

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