Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Introduction MEAN Stack (combinaison MEAN)

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by Florian Valence (you can also view the original English article)

La création d'applications web implique d'avoir à utiliser différentes technologies et outils, que ce soit pour de la manipulation de base de données, des opérations côté serveur et côté client ou gérer et afficher les données provenant du serveur. Avant de commencer un nouveau projet, tous les outils et la structure du projet doivent être mis en place, ce qui est une tâche chronophage. À l'aide d'un framework ou d'une stack (combinaison de framworks) pour cette tâche, vous pouvez accélérer le développement et faciliter le travail pour les développeurs.

Qu'est-ce que MEAN

« MEAN est une plateforme fullstack JavaScript pour les applications web modernes ».

C'est de cette manière que les auteurs de MEAN Stack la définissent sur leur site Web. Il est très clair que MEAN vise toutes sortes de développeurs JavaScript (côté serveur et le client) et aussi que c'est une combinaison, ce qui indique qu'il y a plusieurs éléments qui la composent.

Ces composants sont :

Comme vous pouvez le voir, MEAN réunit quatre des technologies les plus utilisées et appréciées pour le développement JavaScript, établissant ainsi la base pour créer facilement des applications web complexes.

Installation

MEAN peut être installée de deux façons :

Installation de MEAN à l'aide de son site

Cette méthode est assez simple. Il suffit d'aller le site mean.io et ensuite vous pouvez télécharger le framework dans un fichier zip en cliquant sur le gros bouton vert.

Une autre option disponible d'ici consiste à cloner le dépôt Git. Ouvrez simplement un terminal et exécutez la commande suivante :

Installation de MEAN à l'aide de Yeoman

Il y a plusieurs générateurs Yeoman, écrits par des différents programmeurs. Utiliser un générateur afin d'installer MEAN se fait en deux étapes, tout d'abord installer le générateur :

puis utiliser yo pour créer l'application :

L'exemple ci-dessus suppose que le générateur meanstack ainsi que Yeoman soient installés. Pour obtenir la liste des générateurs MEAN, suivez ce lien et filtrez sur « mean ». Pour plus d'informations sur l'installation de Yeoman, vérifier le Yeoman site.

Addy Osmani a écrit un article très intéressant sur son blog à propos de MEAN Stack et des générateurs Yeoman qui l'utilisent. Je recommande vivement cette lecture, afin de savoir comment faire pour installer MEAN à l'aide de générateurs.

Pour cet article, j'utiliserai la méthode par clonage Git.

L'après installation

Après l'installation, utilisez cd pour aller dans le dossier où vous avez installé MEAN et lancez la commande grunt (vous devez avoir installé grunt-cli). Cette commande démarre un serveur sur le port 3000, donc aller à http://localhost: 3000 dans le navigateur affichera quelque chose comme ça :

Ce que nous avons obtenu après installation

MEAN est en fait un moteur de blog entièrement fonctionnel. MEAN permet une authentification à l'aide de diverses méthodes : Facebook, GitHub, Twitter ou Google et aussi par simple e-mail et mot de passe.

Je parie que vous êtes curieux de voir un peu de code à présent... Nous allons donc y jeter un coup d'oeil. La structure du dossier de MEAN devrait être comme suit :

Le côté serveur

Le serveur est divisé en deux dossiers et un fichier :

  • Le dossier app - contient les contrôleurs, les modèles et les vues qui composent l'application
  • Le dossier config - contient les fichiers qui contrôlent le comportement des parties de l'application
  • server.js - est le point d'entrée de l'application

Nous allons les voir un par un :

Le fichier server.js

C'est le fichier qui démarre l'application entière. Si vous ne souhaitez pas utiliser grunt vous pouvez utiliser la commande node server.js afin de démarrer le serveur.

Le fichier server.js est chargé de :

  • Charger la configuration. Les fichiers de configuration de l'application elle-même, l'authentification et la connexion à la base sont chargés.
  • Amorcer les modèles. Cela est fait en parcourant dans le dossier des modèles et en chargeant tous les fichiers à l'intérieur de ce dossier (ou de ses sous-répertoires).
  • Amorcer passport
  • Initialiser l'application express
  • Configurer l'application express
  • Configurer les routes d'express
  • Commencer à écouter le port configuré.

Le dossier config

Ce dossier contient les fichiers de configuration d'application. A l'intérieur vous trouverez un dossier env contenant la configuration des modes développement, production et de test  de l'application.

En outre, il y a des fichiers contenant la configuration de l'application elle-même, la partie express et la configuration de passport pour l'authentification.

Le dossier app

Dans le dossier app, réside tout le code côté serveur. Ce dossier contient les sous-dossiers pour les contrôleurs, les modèles et les vues qui composent l'application MVC serveur et aussi un dossier pour les routes.

Par défaut, il existe des contrôleurs pour les articles, les utilisateurs et un fichier index pour la racine de l'application. De plus, les modèles pour les articles et les utilisateurs sont déjà créés et les routes pour les utilisateurs, les articles et l'accès à la racine sont créées pendant l'installation.

Pour les vues crées par défaut, la structure suivante est créée :

Le dossier includes contient les éléments d'en-tête et de pied de page des parties qui sont insérées dans toutes les pages appartenant à l'application. Le dossier layout contient le HTML de base pour la mise en page. Cette disposition est importée dans le fichier index.html du  dossier views.

Le dossier users contient le code pour l'affichage de l'inscription, la connexion et l'authentification.

Dans la racine du dossier views, à côté du fichier index.html, il y a des fichiers contenant le code pour l'affichage des erreurs 404 et 500.

Le côté client

Le code côté client se trouve dans le dossier public. Ce dossier contient un sous-dossier de css pour le style de l'application et un dossier img contenant les images utilisées dans l'application.

Une attention particulière doit être au dossier js qui contient le code Angular pour l'application côté client, le code d'initialisation, quelques codes de directives et de filtres (fichiers actuellement vides) et les contrôleurs et les services pour les articles et la partie d'en-tête de l'application. Le dossier views contient le balisage pour la création, la  modification, l'affichage et la consulation d'articles.

Enfin, le dossier lib contient le code du framework Angular.

Tester l'application

Le dossier test contient les fichiers pour tester l'application. Il y a globalement les fichiers pour tester la partie serveur avec Mocha et les fichiers pour tester le côté client avec Karma.

Les outils fournis

Lorsque vous utilisez MEAN stack, en tant que développeur, vous avez également accès à npm, bower et grunt qui doivent être préalablement installés.

Il est important de mentionner que JSHint est fourni et que tout le code JavaScript est déjà "linté". De plus, à l'aide de Grunt, le projet peut être observé pour qu'à chaque modification de fichiers il soit reconstruit automatiquement.

Conclusion

Cet article est destiné à être suivi par un second tutoriel, dans lequel une application complète sera construite en s'appuyant sur MEAN, vous montrant comment MEAN peut être configuré et adapté, pour servir à d'autres types d'applications.

Restez connectés pour la deuxième partie !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.