Angular avec TypeScript : guide complet

Pourquoi Angular avec TypeScript : guide complet ?

Dans un monde où la vitesse, la robustesse et la qualité sont des priorités, Angular est une solution idéale pour les développeurs web modernes. En combinant les avantages de JavaScript (flexibilité) et de TypeScript (type-sûreté), Angular offre une expérience de développement efficace et maintenable à grande échelle.

Un cas d'usage concret serait le développement d'une application e-commerce, où la gestion des états complexes, la sécurité et l'intégration avec d'autres services sont cruciaux. Avec Angular et TypeScript, vous pouvez créer une application robuste qui offre une expérience utilisateur fluide.

Prerequis

Avant de commencer ce tutoriel, il est recommandé de disposer des connaissances suivantes :

• Connaissance de base en JavaScript et ES6+
• Familiarité avec les concepts de Vue.js ou React
• Compréhension de la structure d'un projet Angular

Outils à installer (versions)

• Node.js : >= 12.0.0
• npm : >= 6.0.0
• Angular CLI : >= 11.0.0

Vous pouvez installer Angular CLI globalement en utilisant la commande suivante :

npm install -g @angular/cli@latest

Concepts fondamentaux

1. Projet Angular

Un projet Angular est organisé en modules, composants, services et directives. Voici comment vous créez un nouveau projet Angular :

ng new mon-projet
cd mon-projet

2. Composant

Un composant Angular est une classe qui gère le comportement d'une partie de l'interface utilisateur. Il est associé à une vue définie par des templates HTML.

Composant app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mon-projet';
}

3. Template

Le template HTML d'un composant définit la structure de l'interface utilisateur.

app.component.html :

<div>
  <h1>title</h1>
</div>

4. Services

Un service Angular est une classe avec des méthodes pour gérer des opérations métier. Ils sont injectables dans les composants et autres services.

Service app.service.ts :

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  getData() {
    return 'Données du service';
  }
}

5. Routing

Le routing permet de naviguer entre différentes vues d'une application Angular.

app-routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Mise en pratique : projet fil rouge

Nous allons créer un mini-projet complet : une application de gestionnaire de tâches. L'application permettra d'afficher, ajouter et supprimer des tâches.

Étape 1 : Créer le projet Angular

ng new task-manager
cd task-manager

Étape 2 : Ajouter un composant TaskComponent

Créez un nouveau composant pour afficher une liste de tâches :

ng generate component task

task.component.ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent implements OnInit {
  tasks = ['Acheter du pain', 'Faire les courses', 'Ranger la maison'];
  newTask = '';

  constructor() { }

  ngOnInit(): void {}

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

task.component.html :

<div>
  <h2>Tasks</h2>
  <ul>
    <li *ngFor="let task of tasks; let i = index" [class.completed]="i === tasks.length - 1">
      task
      <button (click)="removeTask(i)">Supprimer</button>
    </li>
  </ul>
  <input [(ngModel)]="newTask" placeholder="Ajouter une tâche">
  <button (click)="addTask()">Ajouter</button>
</div>

Étape 3 : Ajouter le composant à app.component.html

<app-task></app-task>

Erreurs fréquentes et debugging

1. Erreur : "Cannot find module './task.component'"

// ❌ Mauvais
import { TaskComponent } from './task.component';

// ✅ Correct
import { TaskComponent } from './task/task.component';

2. Erreur : "Expression changed after check"

Angular empêche les changements de données après la vérification du rendu pour prévenir des problèmes de performance et d'incohérences.

// ❌ Mauvais
this.tasks.push(this.newTask);

// ✅ Correct
setTimeout(() => {
  this.tasks.push(this.newTask);
}, 0);

3. Erreur : "Expression has changed after it was checked"

// ❌ Mauvais
this.newTask = '';

// ✅ Correct
this.ngZone.run(() => {
  this.newTask = '';
});

Pour aller plus loin

1. Angular Ivy : Explorez les nouveaux moteurs de rendu d'Angular pour une meilleure performance.
2. NgRx : Utilisez NgRx pour gérer l'état global de votre application en utilisant Redux.
3. Testing Angular Components : Apprenez à tester vos composants Angular avec Jasmine et Karma.

Défi pratique

Créez un petit module UserModule qui comprend les composants UserProfileComponent, UserSettingsComponent, et UserLoginComponent. Utilisez le routing pour naviguer entre ces vues.