Formation Angular: exos supplémentaires
This commit is contained in:
parent
11b5d82ce4
commit
ccfe7374cc
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`**
|
||||
|
||||
|
|
|
|||
|
|
@ -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('...');
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
||||
}]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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) {
|
||||
|
||||
}]);
|
||||
|
|
@ -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,8 +29,7 @@
|
|||
'directives-4',
|
||||
'directives-5',
|
||||
'directives-6',
|
||||
'fin',
|
||||
'licence'
|
||||
'fin'
|
||||
];
|
||||
</script>
|
||||
<script src="../bower_components/remark/out/remark.js"></script>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# .cadoles-slide-title[Routage dans le navigateur (2/)]
|
||||
|
||||
**Le module `ngRoute`**
|
||||
|
|
@ -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)_
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# .cadoles-slide-title[Les services (2/)]
|
||||
# .cadoles-slide-title[Les services (2/2)]
|
||||
|
||||
**Création de services**
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue