MEAN.JS - Guide rapide

Qu'est-ce que MEAN.js?

Le terme MEAN.jsest une solution open source JavaScript full stack, utilisée pour créer des sites Web dynamiques et des applications Web. MEAN est un acronyme qui signifieMongoDB, Express, Node.js et AngularJS, qui sont les composants clés de la pile MEAN.

Il a été essentiellement développé pour résoudre les problèmes courants liés à la connexion de ces frameworks (Mongo, Express Nodejs, AngularJS), créer un framework robuste pour prendre en charge les besoins de développement quotidiens et aider les développeurs à utiliser de meilleures pratiques tout en travaillant avec des composants JavaScript populaires.

Stack signifie utiliser la base de données et le serveur Web dans le back-end, au milieu, vous aurez la logique et le contrôle de l'application et l'interaction de l'utilisateur au front-end.

• MongoDB - Système de base de données

• Express - Framework Web back-end

• Node.js - Plateforme de serveur Web

• AngularJS - Cadre frontal

L'histoire

Le nom MEAN a été inventé par Valeri Karpov , un développeur MongoDB.

Pourquoi utiliser MEAN.js?

• C'est un framework open source qui est gratuit à utiliser.

• Il peut être utilisé comme solution autonome dans une application entière.

• Il offre des coûts de développement inférieurs et augmente la flexibilité et l'efficacité du développeur.

• Il prend en charge le modèle MVC et utilise le JSON pour transférer des données.

• Il fournit des frameworks supplémentaires, des bibliothèques et des modules réutilisables pour augmenter la vitesse de développement.

Avant de commencer avec d'autres concepts, nous verrons les blocs de construction de base de l' application MEAN.JS.

Introduction à MongoDB

En acronyme MEAN ,Msignifie MongoDB, qui est une base de données NoSQL open source qui enregistre les données au format JSON. Il utilise le modèle de données orienté document pour stocker les données au lieu d'utiliser des tables et des lignes comme nous les utilisons dans les bases de données relationnelles. Il stocke les données au format binaire JSON (JavaScript Serialized Object Notation) pour passer facilement les données entre le client et le serveur. MongoDB travaille sur le concept de collection et de document. Pour plus d'informations, reportez-vous à ce lien MongoDB .

Introduction à Express

En acronyme MEAN ,Esignifie Express , qui est un cadre d'application Web flexible Node.js utilisé pour faciliter le processus de développement. Il est facile à configurer et à personnaliser, ce qui permet de créer des applications sécurisées, modulaires et rapides. Il spécifie les routes d'une application en fonction des méthodes HTTP et des URL. Vous pouvez vous connecter à des bases de données telles que MongoDB, MySQL, Redis facilement. Pour plus d'informations, reportez-vous à ce lien Express .

Introduction à AngularJS

En acronyme MEAN ,Asignifie AngularJS , qui est un framework JavaScript frontend Web. Il permet de créer des applications dynamiques d'une seule page d'une manière propre Model View Controller (MVC). AngularJS gère automatiquement le code JavaScript adapté à chaque navigateur. Pour plus d'informations, reportez-vous à ce lien AngularJS .

Introduction à Node.js

En acronyme MEAN ,Nsignifie Node.js , qui est une plate-forme côté serveur utilisée pour le développement d'applications Web telles que des sites de streaming vidéo, des applications d'une seule page et d'autres applications Web. Il fournit une riche bibliothèque de divers modules JavaScript qui simplifie dans une large mesure le développement d'applications Web utilisant Node.js. Il est construit sur le moteur JavaScript V8 de Google Chrome, il est donc très rapide dans l'exécution du code. Pour plus d' informations, reportez - vous à ce lien Node.js .

MEAN est un framework JavaScript open source, utilisé pour créer des sites Web dynamiques et des applications Web. Il comprend les quatre blocs de construction suivants pour créer une application.

• MongoDB - Il s'agit d'une base de données de documents, qui stocke les données dans des documents flexibles de type JSON.

• Express - C'est un cadre d'application Web pour Nodejs.

• Node.js- C'est la plate-forme de serveur Web. Il fournit une riche bibliothèque de divers modules JavaScript qui simplifie le développement d'applications Web.

• AngularJS- Il s'agit d'un framework JavaScript pour l'interface Web. Il permet de créer des applications dynamiques d'une seule page d'une manière propre Model View Controller (MVC).

Pour plus d'informations à ce sujet, vous pouvez vous référer au chapitre Présentation . Le diagramme ci-dessous illustre l'architecture de l'application MEAN stack.

Comme le montre l'image ci-dessus, nous avons AngularJS comme langage côté client qui traite la demande d'un client.

• Chaque fois qu'un utilisateur fait une demande, elle est d'abord traitée par AngularJS.

• Ensuite, la requête entre dans la deuxième étape, où nous avons Node.js comme langage côté serveur et ExpressJS comme framework web backend.

• Node.js gère les demandes client / serveur et ExpressJS fait une demande à la base de données.

• Dans la dernière étape, MongoDB (base de données) récupère les données et envoie la réponse à ExpressJS.

• ExpressJS renvoie la réponse à Nodejs et à son tour à AngularJS, puis affiche la réponse à l'utilisateur.

Ce chapitre comprend la création et la configuration d'une application MEAN. Nous utilisons NodeJS et ExpressJS ensemble pour créer le projet.

Conditions préalables

Avant de commencer à créer une application MEAN, nous devons installer les prérequis requis.

Vous pouvez installer la dernière version de Node.js en visitant le site Web Node.js à Node.js (ceci est pour les utilisateurs de Windows). Lorsque vous téléchargez Node.js, npm sera installé automatiquement sur votre système. Les utilisateurs Linux peuvent installer le nœud et npm en utilisant ce lien .

Vérifiez la version de Node et npm en utilisant les commandes ci-dessous -

$ node --version
$ npm --version

Les commandes afficheront les versions comme indiqué dans l'image ci-dessous -

Création d'un projet express

Créez un répertoire de projet en utilisant la commande mkdir comme indiqué ci-dessous -

$ mkdir mean-demo //this is name of repository

Le répertoire ci-dessus est la racine de l'application de noeud. Maintenant, pour créer le fichier package.json, exécutez la commande ci-dessous -

$ cd webapp-demo
$ npm init

La commande init vous guidera tout au long de la création d'un fichier package.json -

Cet utilitaire vous guidera tout au long de la création d'un fichier package.json. Il ne couvre que les éléments les plus courants et tente de deviner les valeurs par défaut raisonnables.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

Cliquez sur Oui et une structure de dossier comme ci-dessous sera générée -

-mean-demo
   -package.json

Le fichier package.json aura les informations suivantes -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Maintenant, pour configurer le projet Express dans le dossier actuel et installer les options de configuration pour le framework, utilisez la commande ci-dessous -

npm install express --save

Accédez au répertoire de votre projet et ouvrez le fichier package.json, vous verrez les informations ci-dessous -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Ici, vous pouvez voir qu'une dépendance express est ajoutée au fichier. Maintenant, la structure du projet est comme ci-dessous -

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

Application en cours d'exécution

Accédez au répertoire de votre projet nouvellement créé et créez un fichier server.js avec le contenu ci-dessous.

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Ensuite, exécutez l'application avec la commande ci-dessous -

$ npm start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Il informe que l'application Express est en cours d'exécution. Ouvrez n'importe quel navigateur et accédez à l'application en utilisanthttp://localhost:3000. Vous verrez Welcome to Tutorialspoint! texte comme indiqué ci-dessous -

Ce chapitre montre la construction d'un itinéraire pour une application avec Node et Express.

Dans le chapitre précédent, nous avons créé une application node-express. Accédez au répertoire du projet appelé mean-demo . Accédez au répertoire en utilisant la commande ci-dessous -

$ cd mean-demo

Configuration des itinéraires

Les itinéraires sont utilisés comme service de mappage en utilisant l'URL d'une demande entrante. Ouvrez leserver.js fichier et configurez le routage comme indiqué ci-dessous -

// modules =================================================
const express = require('express');
const app = express();

// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Application en cours d'exécution

Ensuite, exécutez l'application avec la commande ci-dessous -

$ npm start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Maintenant, allez dans le navigateur et tapez http://localhost:3000/myroute. Vous obtiendrez la page comme indiqué dans l'image ci-dessous -

Dans ce chapitre, nous montrerons comment utiliser le modèle de données dans notre application Node-express.

MongoDB est une base de données NoSQL open source qui enregistre les données au format JSON. Il utilise le modèle de données orienté document pour stocker les données au lieu d'utiliser des tables et des lignes comme nous les utilisons dans les bases de données relationnelles. Dans ce chapitre, nous utilisons Mongodb pour créer un modèle de données.

Le modèle de données spécifie quelles données sont présentes dans un document et quelles données doivent figurer dans un document. Reportez-vous à l' installation officielle de MongoDB pour installer MongoDB.

Nous utiliserons notre code de chapitre précédent. Vous pouvez télécharger le code source dans ce lien . Téléchargez le fichier zip; extrayez-le dans votre système. Ouvrez le terminal et exécutez la commande ci-dessous pour installer les dépendances du module npm.

$ cd mean-demo
$ npm install

Ajout de Mongoose à l'application

Mongoose est une bibliothèque de modélisation de données qui spécifie l'environnement et la structure des données en rendant MongoDB puissant. Vous pouvez installer Mongoose en tant que module npm via la ligne de commande. Accédez à votre dossier racine et exécutez la commande ci-dessous -

$ npm install --save mongoose

La commande ci-dessus téléchargera le nouveau package et l'installera dans le dossier node_modules . L' indicateur --save ajoutera ce package au fichier package.json .

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

Configuration du fichier de connexion

Pour travailler avec le modèle de données, nous utiliserons le dossier app / models . Créons le modèle Students.js comme ci-dessous -

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

Vous pouvez configurer le fichier de connexion en créant le fichier et en l'utilisant dans l'application. Créez un fichier appelé db.js dans config / db.js . Le contenu du fichier est comme ci-dessous -

module.exports = {
   url : 'mongodb://localhost:27017/test'
}

Ici, test est le nom de la base de données.

Ici, on suppose que vous avez installé MongoDB localement. Une fois installé, démarrez Mongo et créez une base de données par test de nom. Cette base de données aura une collection par nom d'étudiants. Insérez des données dans cette collection. Dans notre cas, nous avons inséré un enregistrement en utilisant db.students.insertOne ({name: 'Manisha', place: 'Pune', country: 'India'});

Apportez le db.js fichier dans l' application, par exemple, en server.js . Le contenu du fichier est indiqué ci-dessous -

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Ensuite, exécutez l'application avec la commande ci-dessous -

$ npm start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Maintenant, allez dans le navigateur et tapez http://localhost:3000/api/students. Vous obtiendrez la page comme indiqué dans l'image ci-dessous -

Dans ce chapitre, nous verrons notre application interagir via une API REST avec notre base de données en utilisant des méthodes HTTP. Le terme REST signifie REpresentational State Transfer, qui est un style architectural conçu pour communiquer avec les services Web et API signifie Application Program Interface qui permet d'interagir entre les applications.

Tout d'abord, nous allons créer une API RESTful pour obtenir tous les éléments, créer l'élément et supprimer un élément. Pour chaque élément, _id sera généré automatiquement par MongoDB. Le tableau ci-dessous décrit comment l'application doit demander des données à l'API -

Méthode HTTP	Chemin de l'URL	La description
AVOIR	/api/students	Il est utilisé pour récupérer tous les étudiants de la collection Student.
PUBLIER	/api/students/send	Il est utilisé pour créer un dossier étudiant dans la collection Student.
EFFACER	/api/students/student_id	Il est utilisé pour supprimer un dossier étudiant de la collection Student.

Routes API RESTful

Nous allons d'abord discuter de la méthode de publication dans les routes API RESTful.

PUBLIER

Commençons par créer un enregistrement dans la collection Student via notre API REST. Le code de ce cas particulier se trouve dans le fichier server.js . Pour référence, une partie du code est collée ici -

app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         res.json({ message: 'student created!' });
   });
});

Exécution

Vous pouvez télécharger le code source de cette application dans ce lien . Téléchargez le fichier zip; extrayez-le dans votre système. Ouvrez le terminal et exécutez la commande ci-dessous pour installer les dépendances du module npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Pour analyser la demande, nous aurions besoin du package de l'analyseur de corps. Par conséquent, exécutez la commande ci-dessous pour l'inclure dans votre application.

npm install --save body-parser

Le code source attaché a déjà cette dépendance, donc pas besoin d'exécuter la commande ci-dessus, c'est juste pour vos informations.

Pour exécuter l'application, accédez au répertoire de votre projet nouvellement créé et exécutez la commande ci-dessous -

npm start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Il existe de nombreux outils pour tester les appels d'API, ici nous utilisons l'une des extensions conviviales pour Chrome appelée Postman REST Client .

Ouvrez le client REST Postman, entrez l'URL comme http://localhost:3000/api/students/send, sélectionnez la méthode POST . Ensuite, entrez les données de la demande comme indiqué ci-dessous -

Notez que nous envoyons les données de nom sous la forme x-www-form-urlencoded . Cela enverra toutes nos données au serveur Node sous forme de chaînes de requête.

Cliquez sur le bouton Envoyer pour créer un dossier étudiant. Un message de réussite apparaîtra comme indiqué ci-dessous -

AVOIR

Ensuite, récupérons tous les enregistrements d'étudiants du mongodb. L'itinéraire suivant doit être écrit. Vous pouvez trouver le code complet dans le fichier server.js .

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});

Ensuite, ouvrez le client REST Postman, entrez l'URL comme

http://localhost:3000/api/students, sélectionnez la méthode GET et cliquez sur le bouton Envoyer pour obtenir tous les étudiants.

EFFACER

Ensuite, voyons comment supprimer un enregistrement de notre collection mongo via un appel API REST.

L'itinéraire suivant doit être écrit. Vous pouvez trouver le code complet dans le fichier server.js .

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

Ensuite, ouvrez le client REST Postman, entrez l'URL comme

http://localhost:3000/api/students/5d1492fa74f1771faa61146d

(ici 5d1492fa74f1771faa61146d est l'enregistrement que nous allons supprimer de la collection Student).

Sélectionnez la méthode DELETE et cliquez sur le bouton Envoyer pour obtenir tous les étudiants.

Vous pouvez vérifier le MongoDB pour les données supprimées, en appelant GET à http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

Dans ce chapitre, nous allons ajouter des composants angulaires à une application. Il s'agit d'une infrastructure JavaScript Web frontale, qui permet de créer des applications dynamiques d'une seule page à l'aide du modèle MVC (Model View Controller). Dans le chapitre sur l' architecture MEAN.JS , vous avez vu comment AngularJS traitera la demande du client et obtiendra le résultat de la base de données.

Apprendre à connaître AngularJS

AngularJS est un framework d'application Web open source qui utilise HTML comme langage de modèle et étend la syntaxe du HTML pour exprimer clairement les composants de votre application. AngularJS fournit certaines fonctionnalités de base telles que la liaison de données, le modèle, les vues, les contrôleurs, les services, etc. Pour plus d'informations sur AngularJS, reportez-vous à ce lien .

Vous pouvez faire de la page une application angulaire en ajoutant Angular dans la page. Il peut être ajouté simplement en utilisant un fichier JavaScript externe, qui peut être téléchargé ou référencé directement avec une version CDN.

Considérez que nous avons téléchargé le fichier et l'avons référencé localement en l'ajoutant à la page comme suit -

<script src="angular.min.js"></script>

Maintenant, nous devons dire à Angular que cette page est une application Angular. Par conséquent, nous pouvons le faire en ajoutant un attribut, ng-app à la balise <html> ou <body> comme indiqué ci-dessous -

<html ng-app>
or
<body ng-app>

Le ng-app peut être ajouté à n'importe quel élément de la page, mais il est souvent placé dans la balise <html> ou <body> afin qu'Angular puisse fonctionner n'importe où dans la page.

Application angulaire en tant que module

Pour travailler avec une application Angular, nous devons définir un module. C'est un endroit où vous pouvez regrouper les composants, directives, services, etc., qui sont liés à l'application. Le nom du module est référencé par l'attribut ng-app dans le HTML. Par exemple, nous dirons le nom du module d'application Angular comme myApp et nous pouvons le spécifier dans la balise <html> comme indiqué ci-dessous -

<html ng-app="myApp">

Nous pouvons créer une définition pour l'application en utilisant l'instruction ci-dessous dans un fichier JavaScript externe -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Définition du contrôleur

L'application AngularJS s'appuie sur des contrôleurs pour contrôler le flux de données dans l'application. Un contrôleur est défini à l'aide de la directive ng-controller .

Par exemple, nous attacherons le contrôleur au corps en utilisant la directive ng-controller, ainsi que le nom du contrôleur que vous souhaitez utiliser. Dans la ligne ci-dessous, nous utilisons le nom du contrôleur comme "myController".

<body ng-controller="myController">

Vous pouvez attacher un contrôleur (myController) à un module angulaire (myApp) comme indiqué ci-dessous -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Il est préférable d'utiliser une fonction nommée au lieu d'une fonction anonyme pour la lisibilité, la réutilisation et la testabilité. Dans le code ci-dessous, nous utilisons la nouvelle fonction nommée "myController" pour contenir le code du contrôleur -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Pour plus d'informations sur les contrôleurs, reportez-vous à ce lien .

Définition de la portée

Scope est un objet JavaScript spécial qui connecte le contrôleur aux vues et contient des données de modèle. Dans les contrôleurs, les données du modèle sont accessibles via l'objet $ scope. La fonction de contrôleur prend le paramètre $ scope qui a été créé par Angular et donne un accès direct au modèle.

L'extrait de code ci-dessous spécifie comment mettre à jour la fonction du contrôleur pour recevoir le paramètre $ scope et définit la valeur par défaut -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Pour plus d'informations sur les contrôleurs, reportez-vous à ce lien . Dans le chapitre suivant, nous commencerons à créer une application monopage en utilisant Angular.

Dans la pile MEAN, Angular est connu sous le nom de deuxième framework JavaScript, qui permet de créer des applications à une seule page de manière propre Model View Controller (MVC).

AngularJS en tant que Framework frontal utilise les éléments suivants:

• Utilise Bower pour installer des fichiers et des bibliothèques

• Utilise des contrôleurs et des services pour la structure d'application angulaire

• Crée différentes pages HTML

• Utilise le module ngRoute pour gérer le routage et les services pour l'application AngularJS

• Utilise Bootstrap pour rendre une application attrayante

Configuration de notre application angulaire

Construisons une application simple qui a un backend Node.js et un frontend AngularJS. Pour notre application Angular, nous voudrons -

• Deux pages différentes (accueil, étudiant)

• Un contrôleur angulaire différent pour chacun

• Aucune actualisation de la page lors du changement de page

Bower et tirage des composants

Nous aurons besoin de certains fichiers pour notre application comme bootstrap et angular. Nous dirons à Bower de récupérer ces composants pour nous.

Tout d'abord, installez bower sur votre machine en exécutant la commande ci-dessous sur votre terminal de commande -

npm install -g bower

Cela installera bower et le rendra accessible globalement sur votre système. Placez maintenant les fichiers .bowerrc et bower.json sous votre dossier racine. Dans notre cas c'estmean-demo. Le contenu des deux fichiers est comme ci-dessous -

.bowerrc - Cela dira à Bower où placer nos fichiers -

{
   "directory": "public/libs"
}

bower.json - Ceci est similaire à package.json et indiquera à Bower quels packages sont nécessaires.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Ensuite, installez les composants Bower à l'aide de la commande ci-dessous. Vous pouvez voir bower extraire tous les fichiers sous public / libs .

$ bower install

Notre structure de répertoire serait la suivante -

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Contrôleurs angulaires

Notre contrôleur (public / js / controllers / MainCtrl.js) est le suivant -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

Le contrôleur public / js / controllers / StudentCtrl.js est le suivant -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Routes angulaires

Notre fichier de routes (public / js / appRoutes.js) est le suivant -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

Maintenant que nous avons nos contrôleurs et nos routes, nous allons tous les combiner et injecter ces modules dans notre principal public / js / app.js comme suit -

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

Voir la fiche

Angular utilise le fichier modèle, qui peut être injecté dans la <div ng-view> </div> dans le fichier index.html. La directive ng-view crée un espace réservé, où une vue correspondante (vue HTML ou ng-template) peut être placée en fonction de la configuration. Pour plus d'informations sur les vues angulaires, visitez ce lien .

Lorsque vous êtes prêt avec le routage, créez des fichiers modèles plus petits et injectez-les dans le fichier index.html . Le fichier index.html aura l'extrait de code suivant -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Application en cours d'exécution

Exécution

Vous pouvez télécharger le code source de cette application dans ce lien . Téléchargez le fichier zip; extrayez-le dans votre système. Ouvrez le terminal et exécutez la commande ci-dessous pour installer les dépendances du module npm.

$ cd mean-demo
$ npm install

Ensuite, exécutez la commande ci-dessous -

$ node start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Maintenant, allez dans le navigateur et tapez http://localhost:3000. Vous obtiendrez la page comme indiqué dans l'image ci-dessous -

Cliquez sur le lien étudiants , vous verrez l'écran comme ci-dessous -

Notre frontend angulaire utilisera le fichier modèle et l'injectera dans le <div ng-view> </div> de notre fichier index.html . Il le fera sans actualisation de la page.

Dans le chapitre précédent, nous avons vu la création d'une application meanjs d'une seule page en utilisant Angularjs. Dans ce chapitre, voyons comment l'application Angular utilise l'API pour obtenir les données de Mongodb.

Vous pouvez télécharger le code source de cette application dans ce lien . Téléchargez le fichier zip; extrayez-le dans votre système.

La structure du répertoire de notre code source est la suivante -

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -server.js

Dans cette application, nous avons créé une vue (home.html), qui listera tous les étudiants de la collection Student, nous permettra de créer un nouveau studentenregistrer et nous permettre de supprimer le dossier étudiant. Toutes ces opérations sont effectuées via des appels d'API REST.

Ouvrez le terminal et exécutez la commande ci-dessous pour installer les dépendances du module npm.

$ npm install

Ensuite, installez les composants Bower à l'aide de la commande ci-dessous. Vous pouvez voir bower extraire tous les fichiers sous public / libs.

$ bower install

La configuration du noeud pour une application sera enregistrée dans le fichier server.js. Il s'agit du fichier principal de l'application de nœud et configurera l'ensemble de l'application.

// modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// set our port
const port = 3000;
// configuration ===========================================
// configure body parser
app.use(bodyParser.json()); // parse application/json

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students); // return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Définition de la route frontend

Le fichier public / index.html aura l'extrait de code suivant -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Nous avons écrit un service pour effectuer les appels API et exécuter les requêtes API. Notre service, StudentService ressemble à ci-dessous -

angular.module('StudentService', [])
// super simple service
// each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

Notre code de contrôleur (MainCtrl.js) est comme ci-dessous -

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
   // CREATE 
   // when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
      // validate the formData to make sure that something is there
      // if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
         // call the create function from our service (returns a promise object)
         Student.create($scope.formData)
         // if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

Application en cours d'exécution

Accédez au répertoire de votre projet et exécutez la commande ci-dessous -

$ npm start

Naviguez maintenant vers http://localhost:3000 et vous obtiendrez la page comme indiqué dans l'image ci-dessous -

Entrez du texte dans la zone de texte et cliquez sur Addbouton. Un enregistrement est ajouté et affiché comme suit -

Vous pouvez supprimer l'enregistrement en cochant la case.