Angular est un framework JavaScript open source, maintenu par Google, conçu pour développer des applications web dynamiques, modulaires et robustes. Contrairement à une simple bibliothèque comme React, Angular est un framework complet qui offre des solutions pour la gestion des composants, des services, du routage et bien plus.

Dans ce tutoriel, nous allons explorer les bases d’Angular et créer une première application pour vous familiariser avec ses concepts fondamentaux.

Pourquoi Choisir Angular ?

Angular est utilisé par des entreprises du monde entier grâce à ses nombreuses fonctionnalités intégrées :

• Architecture MVC : Séparation claire entre la logique métier, la vue, et les contrôleurs.
• TypeScript : Angular utilise TypeScript, un superset de JavaScript qui ajoute un typage statique et des outils puissants.
• Data Binding : Synchronisation bidirectionnelle des données entre le modèle et la vue.
• Écosystème Complet : Inclus des outils pour le routage, les animations, et les formulaires.

Pré-requis

Avant de commencer, assurez-vous d’avoir :

• Une bonne compréhension de HTML, CSS, et JavaScript.
• TypeScript n’est pas obligatoire mais peut être utile pour tirer parti des fonctionnalités avancées d’Angular.

Configuration de l’Environnement

1. Installer Node.js

Angular utilise Node.js pour gérer les dépendances via npm. Téléchargez et installez Node.js.

2. Installer Angular CLI

Angular CLI (Command Line Interface) simplifie la création et la gestion des projets Angular :

npm install -g @angular/cli

3. Créer un Nouveau Projet

Créez un projet Angular en utilisant la commande suivante :

ng new mon-projet

Acceptez les options par défaut ou configurez selon vos besoins.

4. Lancer le Serveur de Développement

Une fois le projet créé, démarrez-le avec :

cd mon-projet
ng serve

Accédez à votre application sur http://localhost:4200.

Structure d’un Projet Angular

Un projet Angular typique est organisé comme suit :

• src/ : Dossier principal contenant le code source.
• app/ : Contient les composants, services, et autres modules de l’application.
• angular.json : Fichier de configuration pour Angular CLI.
• package.json : Liste des dépendances et scripts npm.

Comprendre les Composants

Les composants sont au cœur d’Angular. Ils définissent la logique et l’apparence de chaque partie de votre application.

Exemple d’un Composant

1. Créer un Composant :

ng generate component bienvenue

2. Modifier le Code :
   Dans le fichier bienvenue.component.ts :

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

@Component({
  selector: 'app-bienvenue',
  template: `<h1>{{ message }}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class BienvenueComponent {
  message: string = 'Bienvenue sur Angular !';
}

3. Ajouter le Composant au Template Principal :
   Dans app.component.html, ajoutez :

<app-bienvenue></app-bienvenue>

Lier les Données avec Data Binding

1. Interpolation

Pour afficher des données dynamiques :

<h1>{{ title }}</h1>

2. Binding d’Attributs

Liez des propriétés à des éléments HTML :

<img [src]="imagePath" />

3. Événements

Manipulez les événements utilisateur avec (event) :

<button (click)="onClick()">Cliquez-moi</button>

Dans le fichier .ts :

onClick() {
  alert('Bouton cliqué!');
}

Ajouter un Service

Les services permettent de partager des données ou une logique métier entre plusieurs composants.

1. Créer un Service :

ng generate service data

2. Ajouter une Méthode :
   Dans data.service.ts :

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'React', 'Vue'];
  }
}

3. Utiliser le Service :
   Dans un composant, injectez le service via le constructeur :

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-frameworks',
  template: `<ul><li *ngFor="let framework of frameworks">{{ framework }}</li></ul>`
})
export class FrameworksComponent implements OnInit {
  frameworks: string[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.frameworks = this.dataService.getData();
  }
}

Gestion du Routage

Angular facilite la création de routes pour naviguer entre différentes pages.

1. Configurer les Routes :
   Dans app-routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BienvenueComponent } from './bienvenue/bienvenue.component';
import { FrameworksComponent } from './frameworks/frameworks.component';

const routes: Routes = [
  { path: '', component: BienvenueComponent },
  { path: 'frameworks', component: FrameworksComponent }
];

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

2. Ajouter des Liens :
   Dans app.component.html :

<nav>
  <a routerLink="/">Accueil</a>
  <a routerLink="/frameworks">Frameworks</a>
</nav>
<router-outlet></router-outlet>

Conclusion

Angular est un framework riche et puissant pour développer des applications modernes. Ce tutoriel vous donne un aperçu des concepts de base. Pour aller plus loin, explorez des sujets comme :

• Formulaires Réactifs
• Modules Lazy Loading
• Animations Angular

Avec de la pratique, Angular deviendra un outil incontournable pour vos projets web. Bonne découverte et bon codage ! 🎉