Share
La création d'applications Web implique l'utilisation de différentes technologies et outils, traitant de la manipulation de base de données, des opérations côté serveur, ainsi que de la gestion et de l'affichage côté client des données provenant du serveur. Avant de commencer un nouveau projet, tous les outils et la structure de projet doivent être configurés, ce qui prend beaucoup de temps. Utiliser un framework ou un empiler pour cette tâche peut accélérer le développement et faciliter le travail du développeur.
"MEAN est une plate-forme JavaScript complète pour les applications Web modernes".
C’est ainsi que les auteurs de la pile MEAN le définissent sur leur site Web. Il est très clair que MEAN cible tous les types de développeurs JavaScript (côté serveur et côté client) et qu’il s’agit également d’une plateforme empilée, ce qui indique que plusieurs composants le composent..
Ces composants sont:
Comme vous pouvez le constater, MEAN regroupe quatre des technologies les plus utilisées et les plus appréciées pour le développement de JavaScript, jetant ainsi les bases d'une construction facile d'applications Web complexes..
La pile MEAN peut être installée de deux manières:
Cette méthode est assez simple. Il suffit de visiter le site mean.io et de télécharger ensuite le framework en tant que Zip *: français déposer en cliquant sur le gros bouton vert.
Une autre option disponible ici est de cloner le référentiel Git. Ouvrez simplement un terminal et lancez la commande suivante:
Clone git https://github.com/linnovate/mean.git
Il existe plusieurs générateurs Yeoman, écrits par différents développeurs. L'utilisation d'un générateur pour installer MEAN s'effectue en deux étapes, en commençant par installer le générateur:
npm install -g generator-meanstack
puis en utilisant yo pour créer l'application:
tu veux dire
L’exemple ci-dessus suppose l’installation du pile moyenne générateur et aussi que Yeoman est installé. Pour obtenir une liste des générateurs MEAN, vérifiez ce lien et filtrez par "moyenne". Pour plus d'informations sur l'installation de Yeoman, consultez le site de Yeoman..
Addy Osmani a écrit un article de blog très intéressant sur MEAN stack et les générateurs Yeoman. Je recommande fortement de lire cela, afin de savoir comment installer la pile en utilisant des générateurs.
Pour les besoins de cet article, j'utiliserai l'approche de clonage Git.
Après l'installation, juste CD dans le dossier où vous avez installé la pile MEAN et émettez le grognement commande (vous devriez avoir grunt-cli installée). Cette commande va démarrer un serveur qui écoute sur le port 3000, alors visitant http: // localhost: 3000 dans le navigateur affichera quelque chose comme ceci:
La pile MEAN est en fait une application de moteur de blog entièrement fonctionnelle. Il dispose d'une authentification utilisant différentes méthodes: Facebook, GitHub, Twitter ou Google, ainsi que par simple courrier électronique et mot de passe..
Je parie que vous êtes curieux de voir du code jusqu'à maintenant… Alors vérifions-le. La structure du dossier de pile MEAN devrait ressembler à ceci:
Le serveur est divisé en deux dossiers et un fichier:
Accentsconagua
app dossier - contient les contrôleurs, les modèles et les vues qui constituent l'applicationconfig dossier - contient les fichiers qui contrôlent le comportement des parties de l'applicationserver.js - est le point d'entrée de l'applicationPrenons les un par un:
server.js FichierC'est le fichier qui lance l'application entière. Si vous ne voulez pas utiliser grognement vous pouvez utiliser serveur de noeud, js afin de démarrer le serveur.
le server.js le fichier est responsable de:
config DossierCe dossier contient les fichiers de configuration de l'application. À l'intérieur, vous pouvez trouver un env dossier contenant les configurations pour les modes de développement, de production et de test pour l'exécution de l'application.
En outre, il existe des fichiers contenant la configuration de l'application elle-même, la partie express et la configuration du passeport pour la connexion..
app dossierÀ l'intérieur de app dossier, réside tout le code côté serveur. Ce dossier contient des sous-dossiers pour les contrôleurs, modèles et vues composant l’application serveur MVC, ainsi qu’un dossier pour les itinéraires servis..
Par défaut, il existe des contrôleurs pour les articles, les utilisateurs et un fichier d'index pour le chemin racine. En outre, des modèles pour les articles et les utilisateurs sont créés et les itinéraires pour les articles, les utilisateurs et le chemin racine sont créés lors de l'installation..
En ce qui concerne les vues créées par défaut, la structure suivante est créée:
le comprend dossier contient les bas de page et les en-têtes des pages qui sont insérés dans toutes les pages appartenant à l'application. le disposition dossier contient le code HTML de base pour la mise en page. Cette mise en page est étendue dans le index.html fichier de la vues dossier.
le utilisateurs dossier contient le code de balisage pour la connexion, l'inscription et l'authentification.
Dans la racine du vues dossier, à côté du index.html fichier, il existe des fichiers contenant le balisage pour les erreurs 404 et 500.
Le code de partie client réside dans le Publique dossier. Ce dossier contient un css sous-dossier pour le style d'application et un img dossier contenant les images utilisées dans l'application.
Une attention particulière devrait être accordée à la js dossier qui contient le code angulaire de l’application côté client, le code d’initialisation, certaines directives et le code des filtres (fichiers actuellement vides) et les contrôleurs et services des articles et de la partie en-tête de l’application. vues dossier contient le balisage pour la création, l'édition, l'affichage et la visualisation d'articles.
Finalement, le lib dossier contient le code de la bibliothèque angulaire.
le tester dossier contient les fichiers pour tester l'application. Il existe principalement des fichiers pour tester la partie serveur à l'aide de Mocha et des fichiers pour tester la partie client à l'aide de Karma.
Lorsque vous utilisez la pile MEAN, en tant que développeur, vous avez également accès à npm, bower et grunt qui doivent être installés.,
Il est important de mentionner que JSHint est fourni et que tout le code JavaScript est linté. En outre, en utilisant Grunt, le projet peut être surveillé pour des modifications et reconstruit automatiquement.
Cet article est destiné à être suivi par un second tutoriel, dans lequel une application complète sera construite sur la pile MEAN, vous montrant comment MEAN peut être configuré et adapté pour être utilisé pour d'autres types d'applications..
Restez à l'écoute pour la deuxième partie!
