2015-04-06 17:50:08 +02:00
|
|
|
# .cadoles-slide-title[Les contrôleurs]
|
|
|
|
|
|
|
|
|
|
.cadoles-small[
|
|
|
|
|
|
2015-04-09 00:19:37 +02:00
|
|
|
- Les contrôleurs permettent de gérer les intéractions utilisateur et les données d'état/temporaires dans votre application Angular.
|
2015-04-08 23:22:53 +02:00
|
|
|
- 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`
|
2015-04-06 17:50:08 +02:00
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
**Exemple**
|
|
|
|
|
```html
|
|
|
|
|
<html>
|
|
|
|
|
<!-- Déclaration du point de montage de notre application" -->
|
|
|
|
|
<body ng-app="myApp">
|
|
|
|
|
<div ng-controller="MyAppCtrl">
|
2015-04-09 20:36:17 +02:00
|
|
|
<span>{{ foo }}</span> <!-- Affiche "Hello World !" -->
|
2015-04-06 17:50:08 +02:00
|
|
|
</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>
|
|
|
|
|
```
|
