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

Base formation angular+amélioration layout formations JS

Browse Source
This commit is contained in:
William Petit
2015-04-06 17:50:08 +02:00
committed by Benjamin Bohard
parent 60d10200f7
commit 7cbddf946d
29 changed files with 800 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/angular/exercices/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

29
javascript/angular/exercices/basic-app/index.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head>
<meta charset="utf8">
<title>Calculateur de diamètre et périmètre d'un cercle</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app ng-init="radius=1.0; pi=3.14">
<h1>Calculateur de diamètre et périmètre d'un cercle</h1>
<label>Approximation de π:</label>
<input ng-model="pi" type="number" step="0.01" />
<br />
<!-- Champ de récupération du rayon -->
<label>Rayon de votre cercle:</label>
<input ng-model="radius" type="number" step="0.1" />
<hr />
<!-- Affichage des valeurs calculées -->
<b>Diamètre: </b><span>{{ 2 * radius }}</span><br />
<b>Périmètre: </b><span>{{ 2 * radius * pi }}</span><br />
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
</body>
</html>

14
javascript/angular/exercices/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "angular-exercices",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "GPL",
"dependencies": {
"angular": "^1.3.15"
}
}

25
javascript/angular/exercices/scope-1/app.js vendored Normal file
View File

@ -0,0 +1,25 @@
/*
* Énoncé:
*
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
* où les éléments <???> sont remplacés par les données présentes dans le
* formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour".
*
* Attention: des directives Angular sont également nécessaires dans le code HTML.
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.nom = null;
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
// alert('...');
};
}]);

31
javascript/angular/exercices/scope-1/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>

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

@ -0,0 +1,25 @@
/*
* Énoncé:
*
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
* où les éléments <???> sont remplacés par les données présentes dans le
* formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour".
*
* Attention: des directives Angular sont également nécessaires dans le code HTML.
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.nom = null;
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
// alert('...');
};
}]);

31
javascript/angular/exercices/scope-2/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>