Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application Todo

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS en construisant une application Todo simple mais puissante. En tant que votre enseignant de sciences informatiques de quartier, je suis ravi de vous guider dans ce processus, même si vous n'avez jamais écrit une ligne de code auparavant. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

AngularJS - ToDo Application

Qu'est-ce qu'AngularJS ?

Avant de commencer à coder, penchons-nous sur ce qu'est AngularJS. Imaginez que vous construisez une maison. HTML serait les fondations et les murs, CSS serait la peinture et les décorations, et JavaScript serait l'électricité et le plomberie. AngularJS est comme une équipe de construction super-efficace qui vous aide à assembler tous ces éléments de manière intelligente et organisée.

AngularJS est un puissant framework JavaScript qui étend le vocabulaire HTML pour votre application. Il est particulièrement bon pour construire des applications à page unique dynamiques.

Configuration de notre projet

Premiers things first, configurons notre projet. Nous aurons besoin de trois fichiers :

  1. index.html (notre fichier HTML principal)
  2. app.js (notre application AngularJS)
  3. style.css (notre feuille de style)

Commençons par notre fichier HTML :

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Mon Application Todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>Ma Liste Todo</h1>
<!-- Nous ajouterons plus de contenu plus tard -->
</body>
</html>

Décomposons cela :

  • ng-app="todoApp" : Cela indique à AngularJS que cet élément est la racine de notre application.
  • ng-controller="TodoController" : Cela spécifie quel contrôleur doit être utilisé pour cette partie de notre application.
  • Nous avons inclus AngularJS depuis un CDN, et lié nos fichiers app.js et style.css.

Création de notre application AngularJS

Maintenant, créons notre application AngularJS dans app.js :

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

app.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 = '';
};
});

Voici ce qui se passe :

  • Nous créons un module AngularJS nommé 'todoApp'.
  • Nous définissons un contrôleur nommé 'TodoController'.
  • À l'intérieur du contrôleur, nous créons un tableau d'items Todo et une fonction pour ajouter de nouveaux todos.
  • $scope est comme un pont entre notre HTML et JavaScript. Il nous permet d'accéder aux variables et fonctions dans notre HTML.

Affichage de nos Todos

Metttons à jour notre HTML pour afficher nos todos :

<body ng-controller="TodoController">
<h1>Ma Liste Todo</h1>
<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 todo">
<input type="submit" value="Ajouter">
</form>
</body>

Décomposons cela :

  • ng-repeat="todo in todos" : Cela crée un nouveau <li> pour chaque todo dans notre tableau de todos.
  • ng-model="todo.done" : Cela lie la case à cocher à la propriété 'done' de notre todo.
  • ng-class="{'done': todo.done}" : Cela applique la classe 'done' lorsque todo.done est vrai.
  • {{todo.text}} : Cela affiche le texte de notre todo.
  • ng-submit="addTodo()" : Cela appelle notre fonction addTodo lorsque le formulaire est soumis.
  • ng-model="newTodo" : Cela lie l'input à notre variable newTodo dans le contrôleur.

Styling de notre App

Enfin, ajoutons un peu de style dans notre style.css :

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

Cette CSS rendra notre application propre et organisée.

Conclusion

Félicitations ! Vous venez de construire votre première application AngularJS. Voici un tableau récapitulatif des principaux concepts AngularJS que nous avons utilisés :

Concept Description
ng-app Définit l'élément racine d'une application AngularJS
ng-controller Spécifie quel contrôleur utiliser pour l'élément HTML
ng-repeat Répète un élément HTML pour chaque item dans un tableau
ng-model Lie un input, select ou textarea à une propriété sur le scope
ng-submit Spécifie quelle fonction exécuter lorsque le formulaire est soumis
ng-class Applique dynamiquement des classes CSS

Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue. Ça prend du temps et de la pratique, mais avec de la persévérance, vous serez bientôt en train de construire des applications complexes. Continuez à coder, continuez à apprendre, et surtout, amusez-vous !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Internationalisation
Tutoriel suivant:
AngularJS - Application de Bloc-notes