MEAN.JS - Costruire una SPA: il livello successivo
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.jsIn 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 installSuccessivamente, installa i componenti Bower utilizzando il comando seguente. Puoi vedere bower tirare in tutti i file sotto public / libs.
$ bower installLa 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 startOra 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.