MEAN.JS - Guida rapida

Cos'è MEAN.js?

Il termine MEAN.jsè una soluzione open source JavaScript full stack, utilizzata per la creazione di siti Web dinamici e applicazioni Web. MEAN è un acronimo che sta perMongoDB, Express, Node.js e AngularJS, che sono i componenti chiave dello stack MEAN.

Fondamentalmente è stato sviluppato per risolvere i problemi comuni con il collegamento di tali framework (Mongo, Express Nodejs, AngularJS), creare un framework robusto per supportare le esigenze di sviluppo quotidiane e aiutare gli sviluppatori a utilizzare pratiche migliori mentre lavorano con componenti JavaScript popolari.

Stack significa utilizzare il database e il server web nel back-end, al centro avrai la logica e il controllo per l'applicazione e l'interazione dell'utente nel front-end.

• MongoDB - Sistema di database

• Express - Framework Web back-end

• Node.js - Piattaforma Web Server

• AngularJS - Framework front-end

Storia

Il nome MEAN è stato coniato da Valeri Karpov , uno sviluppatore di MongoDB.

Perché usare MEAN.js?

• È un framework open source che è gratuito.

• Può essere utilizzato come soluzione standalone in un'intera applicazione.

• Fornisce costi di sviluppo inferiori e aumenta la flessibilità e l'efficienza dello sviluppatore.

• Supporta pattern MVC e utilizza JSON per il trasferimento dei dati.

• Fornisce framework, librerie e moduli riutilizzabili aggiuntivi per aumentare la velocità di sviluppo.

Prima di iniziare con ulteriori concetti, vedremo gli elementi costitutivi di base dell'applicazione MEAN.JS.

Introduzione a MongoDB

In MEAN acronimo,Msta per MongoDB, che è un database NoSQL open source che salva i dati in formato JSON. Utilizza il modello di dati orientato al documento per memorizzare i dati invece di utilizzare tabelle e righe come usiamo nei database relazionali. Memorizza i dati in formato binario JSON (JavaScript Serialized Object Notation) per passare facilmente i dati tra client e server. MongoDB lavora sul concetto di raccolta e documento. Per ulteriori informazioni, fare riferimento a questo collegamento MongoDB .

Introduzione a Express

In MEAN acronimo,Esta per Express , che è un framework per applicazioni web Node.js flessibile utilizzato per rendere più semplice il processo di sviluppo. È facile da configurare e personalizzare, il che consente di creare applicazioni sicure, modulari e veloci. Specifica le rotte di un'applicazione a seconda dei metodi HTTP e degli URL. Puoi connetterti facilmente a database come MongoDB, MySQL, Redis. Per ulteriori informazioni, fare riferimento a questo collegamento Express .

Introduzione ad AngularJS

In MEAN acronimo,Asta per AngularJS , che è un framework JavaScript di frontend web. Consente la creazione di applicazioni dinamiche a pagina singola in un modo pulito MVC (Model View Controller). AngularJS gestisce automaticamente il codice JavaScript adatto a ciascun browser. Per ulteriori informazioni, fare riferimento a questo collegamento AngularJS .

Introduzione a Node.js

In MEAN acronimo,Nsta per Node.js , che è una piattaforma lato server utilizzata per lo sviluppo di applicazioni web come siti di streaming video, applicazioni a pagina singola e altre applicazioni web. Fornisce una ricca libreria di vari moduli JavaScript che semplifica lo sviluppo di applicazioni web utilizzando Node.js in larga misura. È basato sul motore JavaScript V8 di Google Chrome, quindi è molto veloce nell'esecuzione del codice. Per ulteriori informazioni, fare riferimento a questo link Node.js .

MEAN è un framework JavaScript open source, utilizzato per la creazione di siti Web dinamici e applicazioni Web. Comprende i seguenti quattro elementi costitutivi per creare un'applicazione.

• MongoDB - È un database di documenti che memorizza i dati in documenti flessibili, simili a JSON.

• Express - È un framework per applicazioni web per Nodejs.

• Node.js- È la piattaforma Web Server. Fornisce una ricca libreria di vari moduli JavaScript che semplifica lo sviluppo di applicazioni web.

• AngularJS- È un framework JavaScript di frontend web. Consente la creazione di applicazioni dinamiche a pagina singola in un modo pulito MVC (Model View Controller).

Per ulteriori informazioni su questi, è possibile fare riferimento al capitolo della panoramica . Il diagramma seguente mostra l'architettura dell'applicazione stack MEAN.

Come mostrato nell'immagine sopra, abbiamo AngularJS come linguaggio lato client che elabora la richiesta di un client.

• Ogni volta che un utente effettua una richiesta, viene prima elaborata da AngularJS.

• Successivamente, la richiesta entra nella seconda fase, dove abbiamo Node.js come linguaggio lato server ed ExpressJS come framework web backend.

• Node.js gestisce le richieste client / server ed ExpressJS effettua la richiesta al database.

• Nell'ultima fase, MongoDB (database) recupera i dati e invia la risposta a ExpressJS.

• ExpressJS restituisce la risposta a Nodejs e, a sua volta, ad AngularJS, quindi visualizza la risposta all'utente.

Questo capitolo include la creazione e l'impostazione di un'applicazione MEAN. Stiamo usando NodeJS ed ExpressJS insieme per creare il progetto.

Prerequisiti

Prima di iniziare con la creazione di un'applicazione MEAN, è necessario installare i prerequisiti richiesti.

È possibile installare l'ultima versione di Node.js visitando il sito Web di Node.js su Node.js (questo è per gli utenti Windows). Quando scarichi Node.js, npm verrà installato automaticamente sul tuo sistema. Gli utenti Linux possono installare Node e npm utilizzando questo collegamento .

Controlla la versione di Node e npm utilizzando i seguenti comandi:

$ node --version $ npm --version

I comandi visualizzeranno le versioni come mostrato nell'immagine sottostante -

Creazione di Express Project

Crea una directory del progetto utilizzando il comando mkdir come mostrato di seguito -

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

La directory sopra è la radice dell'applicazione del nodo. Ora, per creare il file package.json, esegui il comando seguente:

$ cd webapp-demo
$ npm init

Il comando init ti guiderà attraverso la creazione di un file package.json -

Questa utility ti guiderà attraverso la creazione di un file package.json. Copre solo gli elementi più comuni e cerca di indovinare impostazioni predefinite ragionevoli.

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

Fare clic su Sì e verrà generata una struttura di cartelle come di seguito:

-mean-demo
   -package.json

Il file package.json conterrà le seguenti informazioni:

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

Ora per configurare il progetto Express nella cartella corrente e installare le opzioni di configurazione per il framework, utilizzare il comando seguente:

npm install express --save

Vai alla directory del tuo progetto e apri il file package.json, vedrai le informazioni seguenti:

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

Qui puoi vedere che la dipendenza espressa viene aggiunta al file. Ora, la struttura del progetto è la seguente:

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

Applicazione in esecuzione

Passa alla directory del tuo progetto appena creato e crea un file server.js con i contenuti seguenti.

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

Quindi, esegui l'applicazione con il comando seguente:

$ npm start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Informa che l'applicazione Express è in esecuzione. Apri qualsiasi browser e accedi all'applicazione utilizzandohttp://localhost:3000. Vedrai Benvenuto in Tutorialspoint! testo come mostrato di seguito -

Questo capitolo mostra la creazione di route per un'applicazione con Node e Express.

Nel capitolo precedente, abbiamo creato un'applicazione node-express. Vai alla directory del progetto chiamata mean-demo . Vai alla directory usando il comando seguente -

$ cd mean-demo

Impostazione delle rotte

Le route vengono utilizzate come servizio di mappatura utilizzando l'URL di una richiesta in arrivo. Apri ilserver.js file e imposta il routing come mostrato di seguito -

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

Applicazione in esecuzione

Quindi, esegui l'applicazione con il comando seguente:

$ npm start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Ora vai al browser e digita http://localhost:3000/myroute. Otterrai la pagina come mostrato nell'immagine qui sotto -

In questo capitolo, dimostreremo come utilizzare il modello di dati nella nostra applicazione Node-express.

MongoDB è un database NoSQL open source che salva i dati in formato JSON. Utilizza il modello di dati orientato al documento per memorizzare i dati invece di utilizzare tabelle e righe come usiamo nei database relazionali. In questo capitolo, utilizziamo Mongodb per creare un modello di dati.

Il modello di dati specifica quali dati sono presenti in un documento e quali dati dovrebbero essere presenti in un documento. Fare riferimento all'installazione ufficiale di MongoDB per installare MongoDB.

Useremo il codice del capitolo precedente. Puoi scaricare il codice sorgente in questo link . Scarica il file zip; estrailo nel tuo sistema. Apri il terminale ed esegui il comando seguente per installare le dipendenze del modulo npm.

$ cd mean-demo $ npm install

Aggiunta di mangusta all'applicazione

Mongoose è una libreria di modellazione dei dati che specifica l'ambiente e la struttura dei dati rendendo MongoDB potente. Puoi installare Mongoose come modulo npm tramite la riga di comando. Vai alla tua cartella principale ed esegui il comando seguente:

$ npm install --save mongoose

Il comando precedente scaricherà il nuovo pacchetto e lo installerà nella cartella node_modules . Il flag --save aggiungerà questo pacchetto al file 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"
   }
}

Configurazione del file di connessione

Per lavorare con il modello di dati, utilizzeremo la cartella app / models . Creiamo il modello students.js come di seguito -

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

È possibile impostare il file di connessione creando il file e utilizzandolo nell'applicazione. Creare un file denominato db.js in config / db.js . Il contenuto del file è il seguente:

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

Qui test è il nome del database.

Qui si presume che tu abbia installato MongoDB localmente. Una volta installato, avvia Mongo e crea un database in base al nome. Questo database avrà una raccolta per nome studenti. Inserisci alcuni dati in questa raccolta. Nel nostro caso, abbiamo inserito un record utilizzando db.students.insertOne ({name: 'Manisha', place: 'Pune', country: 'India'});

Porta il file db.js nell'applicazione, cioè in server.js . I contenuti del file sono come mostrato di seguito:

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

Quindi, esegui l'applicazione con il comando seguente:

$ npm start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Ora vai al browser e digita http://localhost:3000/api/students. Otterrai la pagina come mostrato nell'immagine qui sotto -

In questo capitolo, vedremo la nostra applicazione interagire tramite un'API REST con il nostro database utilizzando metodi HTTP. Il termine REST sta per REpresentational State Transfer, che è uno stile architettonico progettato per comunicare con i servizi web e API sta per Application Program Interface che consente l'interazione tra le applicazioni.

Per prima cosa, creeremo l'API RESTful per ottenere tutti gli elementi, creare l'elemento ed eliminare un elemento. Per ogni elemento, _id verrà generato automaticamente da MongoDB. La tabella seguente descrive come l'applicazione deve richiedere i dati dall'API -

Metodo HTTP	Percorso URL	Descrizione
OTTENERE	/api/students	Viene utilizzato per ottenere tutti gli studenti dalla raccolta Student.
INVIARE	/api/students/send	Viene utilizzato per creare un record studente nella raccolta Student.
ELIMINA	/api/students/student_id	Viene utilizzato per eliminare il record di uno studente dalla raccolta Student.

Percorsi API RESTful

Discuteremo prima il metodo di post in RESTful API Routes.

INVIARE

Per prima cosa creiamo un record nella raccolta Student tramite la nostra API REST. Il codice per questo caso particolare può essere trovato nel file server.js . Per riferimento, una parte del codice viene incollata qui -

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

Esecuzione

È possibile scaricare il codice sorgente per questa applicazione in questo collegamento . Scarica il file zip; estrailo nel tuo sistema. Apri il terminale ed esegui il comando seguente per installare le dipendenze del modulo npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Per analizzare la richiesta, avremmo bisogno del pacchetto del parser del corpo. Quindi, esegui il comando seguente per includere nella tua applicazione.

npm install --save body-parser

Il codice sorgente allegato ha già questa dipendenza, quindi non è necessario eseguire il comando precedente, è solo per le tue informazioni.

Per eseguire l'applicazione, vai alla directory del tuo progetto appena creato ed esegui con il comando indicato di seguito:

npm start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Ci sono molti strumenti per testare le chiamate API, qui stiamo usando una delle estensioni user friendly per Chrome chiamata Postman REST Client .

Apri il client REST di Postman, inserisci l'URL come http://localhost:3000/api/students/send, seleziona il metodo POST . Quindi, inserisci i dati della richiesta come mostrato di seguito -

Si noti che stiamo inviando i dati del nome come x-www-form-urlencoded . Questo invierà tutti i nostri dati al server Node come stringhe di query.

Fare clic sul pulsante Invia per creare un record studente. Apparirà un messaggio di successo come mostrato di seguito -

OTTENERE

Quindi, prendiamo tutti i record degli studenti dal mongodb. È necessario scrivere il percorso seguente. Puoi trovare il codice completo nel file 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
   });
});

Quindi, apri il client REST di Postman, inserisci l'URL come

http://localhost:3000/api/students, seleziona il metodo GET e fai clic sul pulsante Invia per ottenere tutti gli studenti.

ELIMINA

Successivamente, vediamo come eliminare un record dalla nostra raccolta di mongo tramite la chiamata api REST.

È necessario scrivere il percorso seguente. Puoi trovare il codice completo nel file 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' });
   });
});

Quindi, apri il client REST di Postman, inserisci l'URL come

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

(qui 5d1492fa74f1771faa61146d è il record che elimineremo dalla raccolta Student).

Seleziona il metodo DELETE e fai clic sul pulsante Invia per ottenere tutti gli studenti.

Puoi controllare MongoDB per i dati cancellati, effettuando una chiamata GET a http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

In questo capitolo, aggiungeremo componenti angolari a un'applicazione. È un framework JavaScript front-end web, che consente di creare applicazioni dinamiche a pagina singola utilizzando il pattern MVC (Model View Controller). Nel capitolo sull'architettura MEAN.JS , hai visto come AngularJS elaborerà la richiesta del client e otterrà il risultato dal database.

Conoscere AngularJS

AngularJS è un framework per applicazioni web open source che utilizza HTML come linguaggio per modelli ed estende la sintassi dell'HTML per esprimere chiaramente i componenti dell'applicazione. AngularJS fornisce alcune funzionalità di base come data binding, modello, viste, controller, servizi ecc. Per ulteriori informazioni su AngularJS, fare riferimento a questo collegamento .

Puoi rendere la pagina un'applicazione angolare aggiungendo Angular nella pagina. Può essere aggiunto semplicemente utilizzando un file JavaScript esterno, che può essere scaricato o può essere referenziato direttamente con una versione CDN.

Considera di aver scaricato il file e di averlo fatto riferimento localmente aggiungendo alla pagina come segue:

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

Ora, dobbiamo dire ad Angular che questa pagina è un'applicazione Angular. Pertanto, possiamo farlo aggiungendo un attributo, ng-app al tag <html> o <body> come mostrato di seguito -

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

L'app ng può essere aggiunta a qualsiasi elemento della pagina, ma spesso viene inserita nel tag <html> o <body> in modo che Angular possa funzionare ovunque all'interno della pagina.

Applicazione angolare come modulo

Per lavorare con un'applicazione Angular, dobbiamo definire un modulo. È un luogo in cui è possibile raggruppare i componenti, le direttive, i servizi, ecc. Relativi all'applicazione. Il nome del modulo è referenziato dall'attributo ng-app nell'HTML. Ad esempio, diremo il nome del modulo dell'applicazione angolare come miaApp e può essere specificato nel tag <html> come mostrato di seguito -

<html ng-app="myApp">

Possiamo creare una definizione per l'applicazione utilizzando la seguente dichiarazione in un file JavaScript esterno -

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

Definizione del controller

L'applicazione AngularJS si basa sui controller per controllare il flusso di dati nell'applicazione. Un controller viene definito utilizzando la direttiva ng-controller .

Ad esempio, collegheremo il controller al corpo utilizzando la direttiva ng-controller, insieme al nome del controller che desideri utilizzare. Nella riga sottostante, stiamo usando il nome del controller come "myController".

<body ng-controller="myController">

È possibile collegare un controller (myController) a un modulo Angular (myApp) come mostrato di seguito -

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

È preferibile utilizzare la funzione denominata invece di una funzione anonima per leggibilità, riutilizzabilità e testabilità. Nel codice seguente, stiamo usando la nuova funzione denominata "myController" per contenere il codice del controller -

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

Per ulteriori informazioni sui controller, fare riferimento a questo collegamento .

Definizione dell'ambito

Scope è uno speciale oggetto JavaScript che collega il controller con le viste e contiene i dati del modello. Nei controller, si accede ai dati del modello tramite l'oggetto $ scope. La funzione controller accetta il parametro $ scope che è stato creato da Angular e dà accesso diretto al modello.

Lo snippet di codice seguente specifica come aggiornare la funzione del controller per ricevere il parametro $ scope e imposta il valore predefinito -

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

Per ulteriori informazioni sui controller, fare riferimento a questo collegamento . Nel prossimo capitolo, inizieremo a creare un'applicazione a pagina singola utilizzando Angular.

Nello stack MEAN, Angular è noto come secondo framework JavaScript, che consente di creare applicazioni a pagina singola in un modo pulito Model View Controller (MVC).

AngularJS come framework front-end utilizza le seguenti cose:

• Utilizza Bower per installare file e librerie

• Utilizza controller e servizi per la struttura dell'applicazione angolare

• Crea diverse pagine HTML

• Utilizza il modulo ngRoute per gestire il routing ei servizi per l'applicazione AngularJS

• Utilizza Bootstrap per rendere attraente un'applicazione

Configurazione della nostra applicazione angolare

Creiamo una semplice applicazione che abbia un backend Node.js e un frontend AngularJS. Per la nostra applicazione angolare, vorremo:

• Due pagine diverse (Home, Studente)

• Un controller angolare diverso per ciascuno

• Nessun aggiornamento della pagina quando si cambia pagina

Bower e tirando in componenti

Avremo bisogno di determinati file per la nostra applicazione come bootstrap e angular. Diremo a bower di recuperare quei componenti per noi.

Innanzitutto, installa bower sulla tua macchina eseguendo il comando seguente sul tuo terminale di comando -

npm install -g bower

Questo installerà bower e lo renderà accessibile a livello globale sul tuo sistema. Ora posiziona i file .bowerrc e bower.json nella cartella principale. Nel nostro caso lo èmean-demo. I contenuti di entrambi i file sono i seguenti:

.bowerrc - Questo dirà a Bower dove posizionare i nostri file -

{
   "directory": "public/libs"
}

bower.json - Questo è simile a package.json e dirà a Bower quali pacchetti sono necessari.

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

Quindi, installa i componenti di Bower utilizzando il comando seguente. Puoi vedere bower tirare in tutti i file sotto public / libs .

$ bower install

La nostra struttura di directory sarebbe la seguente:

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

Controller angolari

Il nostro controller (public / js / controllers / MainCtrl.js) è il seguente:

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

Il controller public / js / controllers / StudentCtrl.js è il seguente:

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

Percorsi angolari

Il nostro file di route (public / js / appRoutes.js) è il seguente:

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

Ora che abbiamo i nostri controller e percorsi, li combineremo tutti e inseriremo questi moduli nel nostro principale public / js / app.js come segue:

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

Vedi il file

Angular utilizza il file modello, che può essere iniettato nel <div ng-view> </div> nel file index.html. La direttiva ng-view crea un segnaposto, in cui una vista corrispondente (HTML o vista ng-template) può essere posizionata in base alla configurazione. Per ulteriori informazioni sulle viste angolari, visitare questo collegamento .

Quando sei pronto con il routing, crea file modello più piccoli e inseriscili nel file index.html . Il file index.html avrà il seguente frammento di codice:

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

Applicazione in esecuzione

Esecuzione

È possibile scaricare il codice sorgente per questa applicazione in questo collegamento . Scarica il file zip; estrailo nel tuo sistema. Apri il terminale ed esegui il comando seguente per installare le dipendenze del modulo npm.

$ cd mean-demo
$ npm install

Quindi esegui il comando seguente:

$ node start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Ora vai al browser e digita http://localhost:3000. Otterrai la pagina come mostrato nell'immagine qui sotto -

Fai clic sul collegamento Studenti , vedrai la schermata come sotto -

Il nostro frontend angolare utilizzerà il file modello e lo inietterà nel <div ng-view> </div> nel nostro file index.html . Lo farà senza un aggiornamento della pagina.

Nel capitolo precedente, abbiamo visto la creazione di un'applicazione meanjs a pagina singola utilizzando Angularjs. In questo capitolo, vediamo come l'applicazione Angular utilizza l'API per ottenere i dati da Mongodb.

È possibile scaricare il codice sorgente per questa applicazione in questo collegamento . Scarica il file zip; estrailo nel tuo sistema.

La struttura delle directory del nostro codice sorgente è la seguente:

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

In questa applicazione, abbiamo creato una vista (home.html), che elencherà tutti gli studenti dalla raccolta Student, permettendoci di creare una nuova studentrecord e consentici di eliminare il record dello studente. Tutte queste operazioni vengono eseguite tramite chiamate API REST.

Apri il terminale ed esegui il comando seguente per installare le dipendenze del modulo npm.

$ npm install

Quindi, installa i componenti di Bower utilizzando il comando seguente. Puoi vedere bower tirare in tutti i file sotto public / libs.

$ bower install

La configurazione del nodo per un'applicazione verrà salvata nel file server.js. Questo è il file principale dell'app del nodo e configurerà l'intera applicazione.

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

Definizione del percorso del frontend

Il file public / index.html avrà il seguente frammento di codice:

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

Abbiamo scritto un servizio per effettuare le chiamate API ed eseguire le richieste API. Il nostro servizio, StudentService appare come di seguito:

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

Il codice del nostro controller (MainCtrl.js) è il seguente:

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

Applicazione in esecuzione

Passa alla directory del tuo progetto ed esegui il comando indicato di seguito:

$ npm start

Ora vai a http://localhost:3000 e otterrai la pagina come mostrato nell'immagine qui sotto -

Immettere del testo nella casella di testo e fare clic su Addpulsante. Un record viene aggiunto e visualizzato come segue:

È possibile eliminare il record selezionando la casella di controllo.