Formation Angular: exos supplémentaires
This commit is contained in:
76
javascript/angular/exercices/scope-2/.solution/app.js
Normal file
76
javascript/angular/exercices/scope-2/.solution/app.js
Normal 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
35
javascript/angular/exercices/scope-2/.solution/index.html
Normal 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
29
javascript/angular/exercices/scope-2/app.js
vendored
Normal 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
35
javascript/angular/exercices/scope-2/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user