formations/javascript/angular/app-basique.md

968 B

.cadoles-slide-title[Premier coup d'oeil]

Une application basique

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