37 lines
968 B
Markdown
37 lines
968 B
Markdown
|
# .cadoles-slide-title[Premier coup d'oeil]
|
||
|
|
|
||
|
|
**Une application basique**
|
||
|
|
|
||
|
|
```html
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf8">
|
||
|
|
<title>Calculateur de diamètre et périmètre d'un cercle</title>
|
||
|
|
</head>
|
||
|
|
<!-- Déclaration du point d'entrée et initialisation 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>
|
||
|
|
|
||
|
|
<!-- Liaison de données via la directive ng-model -->
|
||
|
|
<label>Approximation de π:</label>
|
||
|
|
<input ng-model="pi" type="number" />
|
||
|
|
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Champ de récupération du rayon -->
|
||
|
|
<label>Rayon de votre cercle:</label>
|
||
|
|
<input ng-model="radius" type="number" />
|
||
|
|
<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>
|
||
|
|
```
|