MEAN stack - Julien

La stack MEAN regroupe quatre technologies open-source basées sur JavaScript, permettant de concevoir des applications web complètes, de la base de données à l’interface utilisateur :

Composant	Rôle principal	Fonction	Langage
MongoDB	Base de données	Stockage flexible de données JSON (NoSQL)	JSON/JavaScript
Express.js	Serveur/API	Gestion des routes, requêtes HTTP, APIs REST	JavaScript
Angular	Front-end	Interface dynamique, SPA, composants réactifs	TypeScript (superset de JavaScript)
Node.js	Back-end	Exécution serveur, communication entre client et BDD	JavaScript

Fonctionnement global

MongoDB stocke les données sous forme de documents JSON, offrant une grande souplesse et scalabilité.
Express.js gère la logique serveur et les APIs REST, servant d’intermédiaire entre le client et la base.
Angular permet de construire des interfaces graphiques dynamiques grâce à sa structure en composants et son data-binding bidirectionnel.
Node.js exécute le code JavaScript côté serveur, assurant la rapidité et la capacité à gérer de multiples requêtes simultanées.

Avantages du MEAN

Full JavaScript Stack : Un seul langage (JavaScript) pour toute la chaîne (front-end et back-end).
Scalabilité élevée : Facile à mettre à l’échelle grâce à Node.js et au sharding MongoDB.
Prototypage rapide : Idéal pour créer rapidement des MVP ou des applications en temps réel (tchats, tableaux de bord, collaboratif).
Communauté et écosystème riche : De nombreux outils, bibliothèques et documentation disponibles, facilitant l’apprentissage et l’intégration de fonctionnalités.

Use cases courants

Applications SPA (Single-Page Application)
Plateformes collaboratives et en temps réel (chat, dashboard interactif)
Prototypes et MVP pour startups

Comment démarrer avec la stack MEAN

Prérequis

Avoir Node.js installé sur ton système.
Installer MongoDB (local ou Atlas pour le cloud).
Installer Angular CLI :

npm install -g @angular/cli

Initialisation du projet

Backend – Node.js & Express

Crée un dossier pour ton projet et initialise-le : bash

mkdir projet-mean
cd projet-mean
npm init -y

Installe Express.js et MongoDB driver : bash

npm install express mongoose

Crée un fichier server.js

const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/mean-tuto', { useNewUrlParser: true, useUnifiedTopology: true });

const Item = mongoose.model('Item', { name: String });

app.get('/api/items', async (req, res) => {
  const items = await Item.find();
  res.json(items);
});

app.post('/api/items', async (req, res) => {
  const item = new Item({ name: req.body.name });
  await item.save();
  res.json(item);
});

app.listen(3000, () => console.log('Serveur lancé sur le port 3000'));

Lance le serveur

node server.js

Frontend – Angular

Génère ton application Angular dans un autre dossier

ng new frontend-mean
cd frontend-mean
ng serve --open

Pour communiquer avec l’API, utilise Angular HttpClient dans un service

// src/app/services/item.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ItemService {
  constructor(private http: HttpClient) {}
  getItems() { return this.http.get('/api/items'); }
  addItem(name: string) { return this.http.post('/api/items', { name }); }
}

Pense à configurer le proxy pour Angular (fichier proxy.conf.json)

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

Démarre Angular avec le proxy

ng serve --proxy-config proxy.conf.json