MEAN.JS - Guía rápida

¿Qué es MEAN.js?

El termino MEAN.jses una solución de código abierto JavaScript de pila completa, que se utiliza para crear sitios web y aplicaciones web dinámicos. MEAN es un acrónimo que significaMongoDB, Express, Node.js y AngularJS, que son los componentes clave de la pila MEAN.

Básicamente, se desarrolló para resolver los problemas comunes relacionados con la conexión de esos marcos (Mongo, Express Nodejs, AngularJS), crear un marco sólido para satisfacer las necesidades de desarrollo diarias y ayudar a los desarrolladores a utilizar mejores prácticas mientras trabajan con componentes populares de JavaScript.

Apilar significa usar la base de datos y el servidor web en el back-end, en el medio tendrá lógica y control para la aplicación e interacción del usuario en el front-end.

  • MongoDB - Sistema de base de datos

  • Express - Marco web de back-end

  • Node.js - Plataforma de servidor web

  • AngularJS - Marco de interfaz de usuario

Historia

El nombre MEAN fue acuñado por Valeri Karpov , un desarrollador de MongoDB.

¿Por qué usar MEAN.js?

  • Es un marco de código abierto de uso gratuito.

  • Se puede utilizar como solución independiente en una aplicación completa.

  • Proporciona un menor costo de desarrollo y aumenta la flexibilidad y eficiencia del desarrollador.

  • Es compatible con el patrón MVC y utiliza JSON para transferir datos.

  • Proporciona marcos, bibliotecas y módulos reutilizables adicionales para aumentar la velocidad de desarrollo.

Antes de comenzar con más conceptos, veremos los componentes básicos de la aplicación MEAN.JS.

Introducción a MongoDB

En siglas MEAN ,Msignifica MongoDB, que es una base de datos NoSQL de código abierto que guarda los datos en formato JSON. Utiliza el modelo de datos orientado a documentos para almacenar los datos en lugar de usar tablas y filas como usamos en las bases de datos relacionales. Almacena datos en formato JSON (JavaScript Serialized Object Notation) binario para pasar los datos fácilmente entre el cliente y el servidor. MongoDB trabaja en el concepto de colección y documento. Para obtener más información, consulte este enlace MongoDB .

Introducción a Express

En siglas MEAN ,Esignifica Express , que es un marco de aplicación web flexible de Node.js que se utiliza para facilitar el proceso de desarrollo. Es fácil de configurar y personalizar, lo que permite construir aplicaciones seguras, modulares y rápidas. Especifica las rutas de una aplicación en función de los métodos HTTP y las URL. Puede conectarse a bases de datos como MongoDB, MySQL, Redis fácilmente. Para obtener más información, consulte este enlace Express .

Introducción a AngularJS

En siglas MEAN ,Asignifica AngularJS , que es un marco JavaScript de interfaz web. Permite crear aplicaciones dinámicas de una sola página en una forma limpia de Model View Controller (MVC). AngularJS maneja automáticamente el código JavaScript adecuado para cada navegador. Para obtener más información, consulte este enlace AngularJS .

Introducción a Node.js

En siglas MEAN ,Nson las siglas de Node.js , que es una plataforma del lado del servidor utilizada para el desarrollo de aplicaciones web como sitios de transmisión de video, aplicaciones de una sola página y otras aplicaciones web. Proporciona una biblioteca rica de varios módulos de JavaScript que simplifica en gran medida el desarrollo de aplicaciones web utilizando Node.js. Está construido sobre el motor JavaScript V8 de Google Chrome, por lo que es muy rápido en la ejecución de código. Para obtener más información, consulte este enlace Node.js .

MEAN es un marco de JavaScript de código abierto, que se utiliza para crear sitios web y aplicaciones web dinámicos. Incluye los siguientes cuatro bloques de construcción para construir una aplicación.

  • MongoDB - Es una base de datos de documentos que almacena datos en documentos flexibles similares a JSON.

  • Express - Es un marco de aplicación web para Nodejs.

  • Node.js- Es plataforma de servidor web. Proporciona una rica biblioteca de varios módulos de JavaScript que simplifica el desarrollo de aplicaciones web.

  • AngularJS- Es un marco de JavaScript frontend web. Permite crear aplicaciones dinámicas de una sola página en una forma limpia de Model View Controller (MVC).

Para obtener más información sobre estos, puede consultar el capítulo de descripción general . El siguiente diagrama muestra la arquitectura de la aplicación MEAN stack.

Como se muestra en la imagen de arriba, tenemos AngularJS como lenguaje del lado del cliente que procesa la solicitud de un cliente.

  • Siempre que un usuario realiza una solicitud, AngularJS la procesa primero.

  • A continuación, la solicitud entra en la segunda etapa, donde tenemos Node.js como lenguaje del lado del servidor y ExpressJS como marco web backend.

  • Node.js maneja las solicitudes de cliente / servidor y ExpressJS realiza solicitudes a la base de datos.

  • En la última etapa, MongoDB (base de datos) recupera los datos y envía la respuesta a ExpressJS.

  • ExpressJS devuelve la respuesta a Nodejs y, a su vez, a AngularJS y luego muestra la respuesta al usuario.

Este capítulo incluye la creación y configuración de una aplicación MEAN. Estamos usando NodeJS y ExpressJS juntos para crear el proyecto.

Prerrequisitos

Antes de comenzar a crear una aplicación MEAN, necesitamos instalar los requisitos previos necesarios.

Puede instalar la última versión de Node.js visitando el sitio web de Node.js en Node.js (esto es para usuarios de Windows). Cuando descargue Node.js, npm se instalará automáticamente en su sistema. Los usuarios de Linux pueden instalar Node y npm usando este enlace .

Verifique la versión de Node y npm usando los siguientes comandos:

$ node --version
$ npm --version

Los comandos mostrarán las versiones como se muestra en la siguiente imagen:

Creando Proyecto Express

Cree un directorio de proyecto utilizando el comando mkdir como se muestra a continuación:

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

El directorio anterior es la raíz de la aplicación de nodo. Ahora, para crear el archivo package.json, ejecute el siguiente comando:

$ cd webapp-demo
$ npm init

El comando init lo guiará a través de la creación de un archivo package.json:

Esta utilidad lo guiará a través de la creación de un archivo package.json. Solo cubre los elementos más comunes e intenta adivinar valores predeterminados razonables.

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

Haga clic en Sí y se generará una estructura de carpetas como la siguiente:

-mean-demo
   -package.json

El archivo package.json tendrá la siguiente información:

{
   "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"
}

Ahora, para configurar el proyecto Express en la carpeta actual e instalar las opciones de configuración para el marco, use el siguiente comando:

npm install express --save

Vaya al directorio de su proyecto y abra el archivo package.json, verá la siguiente información:

{
   "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"
   }
}

Aquí puede ver que se agrega dependencia expresa al archivo. Ahora, la estructura del proyecto es la siguiente:

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

Aplicación en ejecución

Navegue hasta el directorio de su proyecto recién creado y cree un archivo server.js con el contenido a continuación.

// 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}!`));

A continuación, ejecute la aplicación con el siguiente comando:

$ npm start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Informa que la aplicación Express se está ejecutando. Abra cualquier navegador y acceda a la aplicación usandohttp://localhost:3000. Verá ¡Bienvenido a Tutorialspoint! texto como se muestra a continuación -

Este capítulo muestra la ruta de construcción para una aplicación con Node y Express.

En el capítulo anterior, creamos una aplicación node-express. Navegue al directorio del proyecto llamado mean-demo . Vaya al directorio usando el siguiente comando:

$ cd mean-demo

Configurar rutas

Las rutas se utilizan como servicio de mapeo mediante la URL de una solicitud entrante. Abre elserver.js archivo y configure el enrutamiento como se muestra a continuación -

// 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}!`));

Aplicación en ejecución

A continuación, ejecute la aplicación con el siguiente comando:

$ npm start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Ahora, vaya al navegador y escriba http://localhost:3000/myroute. Obtendrá la página como se muestra en la imagen a continuación:

En este capítulo, demostraremos cómo utilizar el modelo de datos en nuestra aplicación Node-express.

MongoDB es una base de datos NoSQL de código abierto que guarda los datos en formato JSON. Utiliza el modelo de datos orientado a documentos para almacenar los datos en lugar de usar tablas y filas como usamos en las bases de datos relacionales. En este capítulo, usamos Mongodb para crear un modelo de datos.

El modelo de datos especifica qué datos están presentes en un documento y qué datos deben estar allí en un documento. Consulte la instalación oficial de MongoDB para instalar MongoDB.

Usaremos nuestro código de capítulo anterior. Puede descargar el código fuente en este enlace . Descargue el archivo zip; extraerlo en su sistema. Abra la terminal y ejecute el siguiente comando para instalar las dependencias del módulo npm.

$ cd mean-demo
$ npm install

Añadiendo Mangosta a la Aplicación

Mongoose es una biblioteca de modelado de datos que especifica el entorno y la estructura de los datos al hacer que MongoDB sea poderoso. Puede instalar Mongoose como un módulo npm a través de la línea de comandos. Vaya a su carpeta raíz y ejecute el siguiente comando:

$ npm install --save mongoose

El comando anterior descargará el nuevo paquete y lo instalará en la carpeta node_modules . El indicador --save agregará este paquete al archivo 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"
   }
}

Configuración del archivo de conexión

Para trabajar con el modelo de datos, usaremos la carpeta app / models . Creemos el modelo Students.js como se muestra a continuación:

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: ''}
});

Puede configurar el archivo de conexión creando el archivo y usándolo en la aplicación. Crear un archivo llamado db.js en config / db.js . El contenido del archivo es el siguiente:

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

Aquí prueba es el nombre de la base de datos.

Aquí se supone que ha instalado MongoDB localmente. Una vez instalado, inicie Mongo y cree una base de datos por nombre de prueba. Esta base de datos tendrá una colección por nombre de los estudiantes. Inserta algunos datos en esta colección. En nuestro caso, hemos insertado un registro usando db.students.insertOne ({nombre: 'Manisha', lugar: 'Pune', país: 'India'});

Lleve el archivo db.js a la aplicación, es decir, en server.js . El contenido del archivo se muestra a continuación:

// 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}!`));

A continuación, ejecute la aplicación con el siguiente comando:

$ npm start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Ahora, vaya al navegador y escriba http://localhost:3000/api/students. Obtendrá la página como se muestra en la imagen a continuación:

En este capítulo, veremos nuestra aplicación interactuando a través de una API REST con nuestra base de datos utilizando métodos HTTP. El término REST significa REpresentational State Transfer, que es un estilo arquitectónico diseñado para comunicarse con servicios web y API significa Application Program Interface que permite interactuar aplicaciones entre sí.

Primero, crearemos una API RESTful para obtener todos los elementos, crear el elemento y eliminar un elemento. Para cada elemento, MongoDB generará automáticamente _id. La siguiente tabla describe cómo la aplicación debe solicitar datos a la API:

Método HTTP Ruta URL Descripción
OBTENER

/api/students

 Se utiliza para obtener todos los alumnos de la colección Student.
ENVIAR

/api/students/send

 Se utiliza para crear un registro de estudiante en la colección Estudiante.
ELIMINAR

/api/students/student_id

 Se utiliza para eliminar un registro de estudiante de la colección Student.

Rutas API RESTful

Primero discutiremos el método de publicación en las rutas de la API RESTful.

ENVIAR

Primero, creemos un registro en la colección Student a través de nuestra API REST. El código para este caso particular se puede encontrar en el archivo server.js . Como referencia, una parte del código se pega aquí:

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!' });
   });
});

Ejecución

Puede descargar el código fuente de esta aplicación en este enlace . Descargue el archivo zip; extraerlo en su sistema. Abra la terminal y ejecute el siguiente comando para instalar las dependencias del módulo npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Para analizar la solicitud, necesitaríamos el paquete del analizador corporal. Por lo tanto, ejecute el siguiente comando para incluirlo en su aplicación.

npm install --save body-parser

El código fuente adjunto ya tiene esta dependencia, por lo que no es necesario ejecutar el comando anterior, es solo para su información.

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto recién creado y ejecútelo con el comando que se indica a continuación:

npm start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Hay muchas herramientas para probar las llamadas a la API, aquí estamos usando una de las extensiones fáciles de usar para Chrome llamada Postman REST Client .

Abra Postman REST Client, ingrese la URL como http://localhost:3000/api/students/send, seleccione el método POST . A continuación, ingrese los datos de la solicitud como se muestra a continuación:

Tenga en cuenta que estamos enviando los datos del nombre como x-www-form-urlencoded . Esto enviará todos nuestros datos al servidor Node como cadenas de consulta.

Haga clic en el botón Enviar para crear un registro de estudiante. Aparecerá un mensaje de éxito como se muestra a continuación:

OBTENER

A continuación, obtengamos todos los registros de los estudiantes del mongodb. Es necesario escribir la siguiente ruta. Puede encontrar el código completo en el archivo 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
   });
});

A continuación, abra Postman REST Client, ingrese la URL como

http://localhost:3000/api/students, seleccione el método GET y haga clic en el botón Enviar para obtener todos los estudiantes.

ELIMINAR

A continuación, veamos cómo eliminar un registro de nuestra colección mongo a través de una llamada a la API REST.

Es necesario escribir la siguiente ruta. Puede encontrar el código completo en el archivo 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' });
   });
});

A continuación, abra Postman REST Client, ingrese la URL como

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

(aquí 5d1492fa74f1771faa61146d es el registro que eliminaremos de la colección Student).

Seleccione el método ELIMINAR y haga clic en el botón Enviar para obtener todos los estudiantes.

Puede verificar MongoDB para los datos eliminados, haciendo una llamada GET a http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

En este capítulo, agregaremos componentes angulares a una aplicación. Es un marco JavaScript de front-end web, que permite crear aplicaciones dinámicas de una sola página utilizando el patrón Model View Controller (MVC). En el capítulo de arquitectura MEAN.JS , ha visto cómo AngularJS procesará la solicitud del cliente y obtendrá el resultado de la base de datos.

Conociendo AngularJS

AngularJS es un marco de aplicación web de código abierto que utiliza HTML como lenguaje de plantilla y extiende la sintaxis del HTML para expresar claramente los componentes de su aplicación. AngularJS proporciona algunas características básicas como enlace de datos, modelo, vistas, controladores, servicios, etc. Para obtener más información sobre AngularJS, consulte este enlace .

Puede hacer que la página sea una aplicación Angular agregando Angular en la página. Se puede agregar simplemente usando un archivo JavaScript externo, que se puede descargar o se puede hacer referencia directamente con una versión CDN.

Considere que hemos descargado el archivo y lo hemos referenciado localmente agregándolo a la página de la siguiente manera:

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

Ahora, debemos decirle a Angular que esta página es una aplicación Angular. Por lo tanto, podemos hacer esto agregando un atributo, ng-app a la etiqueta <html> o <body> como se muestra a continuación:

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

La ng-app se puede agregar a cualquier elemento de la página, pero a menudo se coloca en la etiqueta <html> o <body> para que Angular pueda funcionar en cualquier lugar dentro de la página.

Aplicación angular como módulo

Para trabajar con una aplicación Angular, necesitamos definir un módulo. Es un lugar donde se pueden agrupar los componentes, directivas, servicios, etc., que están relacionados con la aplicación. El nombre del módulo está referenciado por el atributo ng-app en el HTML. Por ejemplo, diremos el nombre del módulo de la aplicación angular como myApp y se puede especificar en la etiqueta <html> como se muestra a continuación:

<html ng-app="myApp">

Podemos crear una definición para la aplicación utilizando la siguiente declaración en un archivo JavaScript externo:

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

Definición de controlador

La aplicación AngularJS se basa en controladores para controlar el flujo de datos en la aplicación. Un controlador se define mediante la directiva ng-controller .

Por ejemplo, adjuntaremos el controlador al cuerpo usando la directiva ng-controller, junto con el nombre del controlador que desea usar. En la siguiente línea, estamos usando el nombre del controlador como "myController".

<body ng-controller="myController">

Puede adjuntar un controlador (myController) a un módulo angular (myApp) como se muestra a continuación:

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

Es mejor usar una función con nombre en lugar de una función anónima para facilitar la lectura, la reutilización y la capacidad de prueba. En el siguiente código, estamos usando la nueva función nombrada "myController" para contener el código del controlador -

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

Para obtener más información sobre los controladores, consulte este enlace .

Definición del alcance

Scope es un objeto JavaScript especial que conecta el controlador con las vistas y contiene datos del modelo. En los controladores, se accede a los datos del modelo a través del objeto $ scope. La función del controlador toma el parámetro $ scope que ha sido creado por Angular y brinda acceso directo al modelo.

El siguiente fragmento de código especifica cómo actualizar la función del controlador para recibir el parámetro $ scope y establece el valor predeterminado:

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

Para obtener más información sobre los controladores, consulte este enlace . En el próximo capítulo, comenzaremos a crear una aplicación de una sola página usando Angular.

En la pila MEAN, Angular se conoce como el segundo marco de JavaScript, que permite crear aplicaciones de una sola página en una forma limpia del controlador de vista de modelo (MVC).

AngularJS como marco front-end utiliza las siguientes cosas:

  • Utiliza Bower para instalar archivos y bibliotecas

  • Utiliza controladores y servicios para la estructura de la aplicación angular

  • Crea diferentes páginas HTML

  • Utiliza el módulo ngRoute para manejar el enrutamiento y los servicios para la aplicación AngularJS

  • Utiliza Bootstrap para hacer atractiva una aplicación

Configuración de nuestra aplicación angular

Construyamos una aplicación simple que tenga un backend Node.js y un frontend AngularJS. Para nuestra aplicación Angular, queremos:

  • Dos páginas diferentes (Inicio, Estudiante)

  • Un controlador angular diferente para cada

  • No se actualiza la página al cambiar de página

Bower y extracción de componentes

Necesitaremos ciertos archivos para nuestra aplicación como bootstrap y angular. Le diremos a Bower que nos traiga esos componentes.

Primero, instale bower en su máquina ejecutando el siguiente comando en su terminal de comandos:

npm install -g bower

Esto instalará bower y lo hará accesible globalmente en su sistema. Ahora coloque los archivos .bowerrc y bower.json en su carpeta raíz. En nuestro caso esmean-demo. El contenido de ambos archivos es el siguiente:

.bowerrc - Esto le dirá a Bower dónde colocar nuestros archivos:

{
   "directory": "public/libs"
}

bower.json - Es similar a package.json y le dirá a Bower qué paquetes son necesarios.

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

A continuación, instale los componentes de Bower utilizando el siguiente comando. Puede ver que bower extrae todos los archivos en public / libs .

$ bower install

Nuestra estructura de directorio sería la siguiente:

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

Controladores angulares

Nuestro controlador (public / js / controllers / MainCtrl.js) es el siguiente:

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

Controller public / js / controllers / StudentCtrl.js es el siguiente:

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

Rutas angulares

Nuestro archivo de rutas (public / js / appRoutes.js) es el siguiente:

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);
}]);

Ahora que tenemos nuestros controladores y rutas, los combinaremos todos e inyectaremos estos módulos en nuestro público principal / js / app.js de la siguiente manera:

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

Ver archivo

Angular usa el archivo de plantilla, que se puede inyectar en <div ng-view> </div> en el archivo index.html. La directiva ng-view crea un marcador de posición, donde se puede colocar una vista correspondiente (vista HTML o ng-template) según la configuración. Para obtener más información sobre vistas angulares, visite este enlace .

Cuando esté listo con el enrutamiento, cree archivos de plantilla más pequeños e inyéctelos en el archivo index.html . El archivo index.html tendrá el siguiente fragmento de código:

<!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>

Aplicación en ejecución

Ejecución

Puede descargar el código fuente de esta aplicación en este enlace . Descargue el archivo zip; extraerlo en su sistema. Abra la terminal y ejecute el siguiente comando para instalar las dependencias del módulo npm.

$ cd mean-demo
$ npm install

A continuación, ejecute el siguiente comando:

$ node start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Ahora, vaya al navegador y escriba http://localhost:3000. Obtendrá la página como se muestra en la imagen a continuación:

Haga clic en el enlace Estudiantes , verá la siguiente pantalla:

Nuestra interfaz angular usará el archivo de plantilla y lo inyectará en <div ng-view> </div> en nuestro archivo index.html . Lo hará sin actualizar la página.

En el capítulo anterior, hemos visto la creación de una aplicación meanjs de una sola página usando Angularjs. En este capítulo, veamos cómo la aplicación Angular usa la API para obtener los datos de Mongodb.

Puede descargar el código fuente de esta aplicación en este enlace . Descargue el archivo zip; extraerlo en su sistema.

La estructura de directorio de nuestro código fuente es la siguiente:

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

En esta aplicación, hemos creado una vista (home.html), que mostrará una lista de todos los estudiantes de la colección Estudiante, nos permitirá crear una nueva studentregistro y nos permite eliminar el registro del estudiante. Todas estas operaciones se realizan mediante llamadas a la API REST.

Abra la terminal y ejecute el siguiente comando para instalar las dependencias del módulo npm.

$ npm install

A continuación, instale los componentes de Bower utilizando el siguiente comando. Puede ver que bower extrae todos los archivos en public / libs.

$ bower install

La configuración del nodo para una aplicación se guardará en el archivo server.js. Este es el archivo principal de la aplicación de nodo y configurará toda la aplicación.

// 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}!`));

Definición de ruta frontend

El archivo public / index.html tendrá el siguiente fragmento de código:

<!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>

Hemos escrito un servicio para realizar las llamadas a la API y ejecutar las solicitudes de la API. Nuestro servicio, StudentService se ve a continuación:

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);
      }
   }
}]);

Nuestro código de controlador (MainCtrl.js) es el siguiente:

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
      });
   };
}]);

Aplicación en ejecución

Navegue hasta el directorio de su proyecto y ejecute el comando que se indica a continuación:

$ npm start

Ahora navega a http://localhost:3000 y obtendrá la página como se muestra en la imagen a continuación:

Ingrese algún texto en el cuadro de texto y haga clic en Addbotón. Se agrega un registro y se muestra de la siguiente manera:

Puede eliminar el registro marcando la casilla de verificación.