# .cadoles-slide-title[Les contrôleurs]

.cadoles-small[

- Les contrôleurs permettent de gérer les intéractions utilisateur et les données d'état/temporaires dans votre application Angular.
- Le périmètre d'action d'un contrôleur est lié à un élément du DOM et sa définition s'effectue via l'utilisation de la directive `ng-controller`

]

**Exemple**
```html
<html>
  <!-- Déclaration du point de montage de notre application" -->
  <body ng-app="myApp">
    <div ng-controller="MyAppCtrl">
      <span>{{ foo }}</span> <!-- Affiche "Hello World !" -->
    </div>
    <!-- Import du framework Angular -->
    <script src="angular.js"></script>
    <!-- Déclaration de notre module/application Angular -->
    <script>
      var myApp = angular.module('myApp', []);

      myApp.controller('MyAppCtrl', ['$scope', function($scope) {

        $scope.foo = 'Hello World !';

      }]);
    </script>
  </body>
</html>
```