Angular est un puissant framework JavaScript pour construire des applications web
robustes. Voici un exemple pour démarrer avec Angular et créer une application
simple de gestion des tâches (To-Do List).
---
### Étape 1 : Installer Angular CLI et configurer un projet
1. **Installer Angular CLI** :
```bash
npm install -g @angular/cli
```
2. **Créer un nouveau projet Angular** :
```bash
ng new todo-app
cd todo-app
ng serve
```
Cela lance le projet et ouvre l'application par défaut sur
`[Link]
---
### Étape 2 : Créer une application To-Do List
#### 1. **Générer un composant `todo`**
```bash
ng generate component todo
```
---
#### 2. **Mettre en place la logique dans `[Link]`**
Ajoutez la logique pour gérer les tâches dans le fichier
`src/app/todo/[Link]` :
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-todo',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class TodoComponent {
tasks: { text: string, completed: boolean }[] = [];
newTask: string = '';
addTask() {
if ([Link]()) {
[Link]({ text: [Link], completed: false });
[Link] = '';
}
}
toggleTask(index: number) {
[Link][index].completed = ![Link][index].completed;
}
deleteTask(index: number) {
[Link](index, 1);
}
}
```
---
#### 3. **Créer le template dans `[Link]`**
Ajoutez le code HTML pour l'interface utilisateur :
```html
<div class="todo-container">
<h1>To-Do List</h1>
<div>
<input
type="text"
[(ngModel)]="newTask"
placeholder="Add a new task"
/>
<button (click)="addTask()">Add</button>
</div>
<ul>
<li *ngFor="let task of tasks; let i = index"
[[Link]]="[Link]">
<span (click)="toggleTask(i)">{{ [Link] }}</span>
<button (click)="deleteTask(i)">Delete</button>
</li>
</ul>
</div>
```
---
#### 4. **Ajouter des styles dans `[Link]`**
Ajoutez un style de base pour rendre l'application agréable :
```css
.todo-container {
text-align: center;
font-family: Arial, sans-serif;
}
input {
padding: 10px;
margin-right: 10px;
font-size: 16px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
li span {
cursor: pointer;
}
[Link] span {
text-decoration: line-through;
color: gray;
}
li button {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
li button:hover {
background-color: darkred;
}
```
---
#### 5. **Mettre à jour le `AppComponent` pour utiliser le composant `Todo`**
Dans `src/app/[Link]`, remplacez le contenu par :
```html
<app-todo></app-todo>
```
---
### Étape 3 : Ajouter NgModel pour la liaison bidirectionnelle
Ajoutez `FormsModule` à `AppModule` pour utiliser `[(ngModel)]` :
Dans `src/app/[Link]`, importez `FormsModule` :
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './[Link]';
import { TodoComponent } from './todo/[Link]';
@NgModule({
declarations: [
AppComponent,
TodoComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
---
### Étape 4 : Lancez l'application
1. **Lancez le projet Angular** :
```bash
ng serve
```
2. Accédez à l'application à l'adresse `[Link]
---
### Étape 5 : Étendre les fonctionnalités
Pour enrichir cette application :
- **Sauvegarder les tâches localement** : Utilisez `localStorage` pour persister
les données.
- **Intégrer une API REST** : Connectez votre application Angular à un backend (par
exemple Spring Boot).
- **Ajout de filtres** : Filtrez les tâches par statut (terminées, non terminées).
Besoin d’aide pour ajouter ces fonctionnalités ? 😊
