AngularJS - Modules

Bonjour, futurs programmeurs ! Aujourd'hui, nous plongeons dans le monde des modules AngularJS. Ne vous inquiétez pas si vous êtes nouveaux dans le monde de la programmation ; je vais vous guider pas à pas, tout comme j'ai fait pour des centaines d'étudiants au fil des ans. Commençons cette aventure passionnante ensemble !

AngularJS - Modules

Qu'est-ce que les modules AngularJS ?

Imaginez que vous construisez une structure massive en Lego. Au lieu d'essayer de tout construire d'un coup, vous créeriez probablement des pièces plus petites et gérables que vous combinerez plus tard. C'est exactement ce que font les modules dans AngularJS !

Les modules dans AngularJS sont des conteneurs pour différentes parties de votre application. Ils vous aident à organiser votre code, ce qui le rend plus facile à entretenir et à comprendre. Pensez à eux comme des boîtes étiquetées soigneusement où vous stockez différentes fonctionnalités de votre application.

Module Application

Le module application est comme la boîte principale qui contient toutes les autres boîtes. C'est là que commence votre application AngularJS. Créons notre premier module application :

var myApp = angular.module('myApp', []);

Voici ce qui se passe dans cette ligne :

angular.module() est une fonction qui crée un nouveau module.
'myApp' est le nom que nous donnons à notre module.
Le tableau vide [] est où nous listerions toute dépendance que notre module pourrait avoir (nous y reviendrons plus tard).

Module Controller

Maintenant que nous avons notre boîte principale (module application), ajoutons quelques petites boîtes à l'intérieur. L'une d'elles est le module controller. Les controllers dans AngularJS gèrent les données de votre application. Voici comment vous pouvez créer un controller :

myApp.controller('MyController', function($scope) {
$scope.message = "Bonjour, AngularJS !";
});

Décomposons cela :

myApp.controller() ajoute un nouveau controller à notre module myApp.
'MyController' est le nom que nous donnons à ce controller.
La fonction définit ce que fait ce controller.
$scope est un objet spécial qui permet au controller de communiquer avec la vue (HTML).

Utiliser les Modules

Maintenant que nous avons créé nos modules, comment les utilisons-nous réellement ? C'est plus simple que vous ne pourriez le penser ! Vous devez simplement les referenced dans votre HTML. Voici comment faire :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Mon Application AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Notez quelques éléments clés ici :

ng-app="myApp" indique à AngularJS que c'est là que vit notre application.
ng-controller="MyController" applique notre controller au corps.
{{message}} affichera le message que nous avons défini dans notre controller.

Exemple

Mettons tout cela ensemble avec un exemple légèrement plus complexe. Nous allons créer une application de liste de tâches simple :

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Apprendre AngularJS', done: false},
{text: 'Construire une application', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Et voici le HTML correspondant :

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title Liste des Tâches</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2 Liste des Tâches</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Ajouter une nouvelle tâche">
<input type="submit" value="Ajouter">
</form>
<script src="app.js"></script>
</body>
</html>

Sortie

Lorsque vous exécutez ce code, vous verrez une application de liste de tâches simple. Vous pouvez ajouter de nouvelles tâches et les cocher lorsque vous les terminez. Le magie opère par l'interaction entre nos modules (définis dans app.js) et notre HTML.

Conclusion

Et voilà ! Nous avons fait le tour du monde des modules AngularJS, de la notion de base à une application de liste de tâches fonctionnelle. Souvenez-vous, les modules sont comme des blocs Lego - ils vous aident à construire des structures complexes morceau par morceau. Lorsque vous continuerez votre aventure avec AngularJS, vous découvrirez encore plus de façons d'utiliser les modules pour créer des applications web puissantes et efficaces.

Continuez à pratiquer, restez curieux, et surtout, amusez-vous à coder ! Qui sait ? La prochaine application révolutionnaire pourrait bien être entre vos doigts !

Méthode	Description
angular.module()	Crée un nouveau module
module.controller()	Ajoute un nouveau controller à un module
ng-app	Directive pour autoamorcer une application AngularJS
ng-controller	Directive pour spécifier un controller
ng-repeat	Directive pour répéter un ensemble d'éléments HTML
ng-model	Directive pour lier un input à une variable
ng-submit	Directive pour spécifier le comportement de soumission d'un formulaire
ng-class	Directive pour définir dynamiquement des classes CSS

Credits: Image by storyset

Tutoriel précédent:

AngularJS - DOM HTML

Tutoriel suivant:

AngularJS - Formulaires