formations/javascript/angular/app-basique.md

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