MEAN.JS - 快速指南

---

MEAN.JS - 概述

什么是 MEAN.js？

MEAN.js一词是一个全栈 JavaScript 开源解决方案，用于构建动态网站和 Web 应用程序。MEAN 是M ongoDB、E xpress、Node.js和A ngularJS的缩写，它们是 MEAN 堆栈的关键组件。

它的开发基本上是为了解决连接这些框架（Mongo、Express Nodejs、AngularJS）的常见问题，构建一个强大的框架来支持日常开发需求，并帮助开发人员在使用流行的 JavaScript 组件时使用更好的实践。

堆栈意味着在后端使用数据库和Web服务器，在中间您将在前端对应用程序和用户交互进行逻辑和控制。

• MongoDB - 数据库系统

• Express - 后端 Web 框架

• Node.js - Web 服务器平台

• AngularJS - 前端框架

历史

MEAN 这个名字是由MongoDB 开发人员Valeri Karpov创造的。

为什么要使用 MEAN.js？

• 它是一个可以免费使用的开源框架。

• 它可以用作整个应用程序中的独立解决方案。

• 它提供了更低的开发成本并提高了开发人员的灵活性和效率。

• 它支持MVC模式并使用JSON来传输数据。

• 它提供了额外的框架、库和可重用模块来提高开发速度。

在开始进一步的概念之前，我们将了解MEAN.JS应用程序的基本构建块。

MongoDB简介

在MEAN缩写中，M代表 MongoDB，它是一个开源 NoSQL 数据库，以 JSON 格式保存数据。它使用面向文档的数据模型来存储数据，而不是像我们在关系数据库中使用的表和行。它以二进制 JSON（JavaScript 序列化对象表示法）格式存储数据，以便在客户端和服务器之间轻松传递数据。MongoDB 致力于集合和文档的概念。有关更多信息，请参阅此链接MongoDB。

快递简介

在MEAN缩写中，E代表Express，它是一个灵活的 Node.js Web 应用程序框架，用于简化开发过程。它易于配置和定制，允许构建安全、模块化和快速的应用程序。它根据 HTTP 方法和 URL 指定应用程序的路由。您可以轻松连接MongoDB、MySQL、Redis等数据库。欲了解更多信息，请参阅此链接Express。

AngularJS 简介

在MEAN缩写中，A代表AngularJS，它是一个 Web 前端 JavaScript 框架。它允许以干净的模型视图控制器（MVC）方式创建动态的单页应用程序。AngularJS 自动处理适合每个浏览器的 JavaScript 代码。有关更多信息，请参阅此链接AngularJS。

Node.js 简介

在MEAN缩写中，N代表Node.js，它是一个服务器端平台，用于开发 Web 应用程序，如视频流网站、单页应用程序和其他 Web 应用程序。它提供了丰富的各种 JavaScript 模块库，很大程度上简化了使用 Node.js 的 Web 应用程序的开发。它基于 Google Chrome 的 V8 JavaScript 引擎构建，因此代码执行速度非常快。有关更多信息，请参阅此链接Node.js。

MEAN.JS - 架构

MEAN 是一个开源 JavaScript 框架，用于构建动态网站和 Web 应用程序。它包括以下四个构建块来构建应用程序。

• MongoDB - 它是一个文档数据库，将数据存储在灵活的、类似 JSON 的文档中。

• Express - 它是 Nodejs 的 Web 应用程序框架。

• Node.js - 它是 Web 服务器平台。它提供了丰富的各种 JavaScript 模块库，简化了 Web 应用程序的开发。

• AngularJS - 它是一个 Web 前端 JavaScript 框架。它允许以干净的模型视图控制器（MVC）方式创建动态的单页应用程序。

有关这些的更多信息，您可以参阅概述章节。下图描述了 MEAN 堆栈应用程序的架构。

如上图所示，我们使用 AngularJS 作为客户端语言来处理客户端的请求。

• 每当用户发出请求时，AngularJS 首先会处理该请求。

• 接下来，请求进入第二阶段，我们使用 Node.js 作为服务器端语言，使用ExpressJS作为后端 Web 框架。

• Node.js处理客户端/服务器请求，ExpressJS向数据库发出请求。

• 在最后阶段，MongoDB（数据库）检索数据并将响应发送到 ExpressJS。

• ExpressJS 将响应返回给 Nodejs，然后返回给 AngularJS，然后将响应显示给用户。

MEAN.JS - MEAN 项目设置

本章包括创建和设置 MEAN 应用程序。我们一起使用 NodeJS 和 ExpressJS 来创建该项目。

先决条件

在开始创建 MEAN 应用程序之前，我们需要安装所需的先决条件。

您可以通过访问 Node.js 网站Node.js（适用于 Windows 用户）来安装最新版本的 Node.js。当您下载 Node.js 时，npm 将自动安装在您的系统上。Linux 用户可以使用此链接安装 Node 和 npm 。

使用以下命令检查 Node 和 npm 的版本 -

$ 节点--版本
$ npm --版本

命令将显示版本，如下图所示 -

创建 Express 项目

使用 mkdir 命令创建项目目录，如下所示 -

$ mkdir Mean-demo //这是存储库的名称

上述目录是节点应用程序的根目录。现在，要创建 package.json 文件，请运行以下命令 -

$ cd webapp-demo
$ npm 初始化

init 命令将引导您创建 package.json 文件 -

该实用程序将引导您创建 package.json 文件。它仅涵盖最常见的项目，并尝试猜测合理的默认值。

有关这些字段及其具体用途的明确文档，请参阅“npm help json”。
之后使用 npm install --save 安装包并将其保存为 package.json 文件中的依赖项。

随时按 ^C 即可退出。
名称：(mean-demo)mean_tutorial
版本：(1.0.0)
描述：这是 MEAN 堆栈的基本教程示例
入口点：(index.js) server.js
测试命令：测试
git 存储库：
关键词：MEAN、Mongo、Express、Angular、Nodejs
作者：马尼沙
许可证：（ISC）
即将写入 /home/mani/work/rnd/mean-demo/package.json：

{
   “名称”：“意思_教程”，
   “版本”：“1.0.0”，
   "description": "这是 MEAN 堆栈的基本教程示例",
   “主要”：“服务器.js”，
   “脚本”：{
      “测试一下”
   },
   “关键字”：[
      “意思是”，
      “蒙戈”，
      “表达”，
      “有角”，
      “Node.js”
   ],
   “作者”：“马尼沙”，
   “许可证”：“ISC”
}

这个可以吗？（是的是的

单击“是”，将生成如下文件夹结构 -

-平均演示
   -package.json

package.json文件将包含以下信息 -

{
   “名称”：“意思_教程”，
   “版本”：“1.0.0”，
   "description": "这是 MEAN 堆栈的基本教程示例",
   “主要”：“服务器.js”，
   “脚本”：{
      “测试一下”
   },
   “关键字”：[
      “意思是”，
      “蒙戈”，
      “表达”，
      “有角”，
      “Node.js”
   ],
   “作者”：“马尼沙”，
   “许可证”：“ISC”
}

现在要将 Express 项目配置到当前文件夹并安装框架的配置选项，请使用以下命令 -

npm 安装express --保存

转到您的项目目录并打开 package.json 文件，您将看到以下信息 -

{
   “名称”：“意思_教程”，
   “版本”：“1.0.0”，
   "description": "这是 MEAN 堆栈的基本教程示例",
   “主要”：“服务器.js”，
   “脚本”：{
      “测试一下”
   },
   “关键字”：[
      “意思是”，
      “蒙戈”，
      “表达”，
      “有角”，
      “Node.js”
   ],
   “作者”：“马尼沙”，
   “许可证”：“ISC”，
   “依赖项”：{
      "快递": "^4.17.1"
   }
}

在这里您可以看到明确的依赖项已添加到文件中。现在，项目结构如下 -

-平均演示
   --node_modules 由 npm install 创建
   --package.json 告诉 npm 我们需要哪些包
   --server.js 设置我们的节点应用程序

运行应用程序

导航到新创建的项目目录并创建一个包含以下内容的 server.js 文件。

// 模块 ================================================= ==
const express = require('express');
常量应用程序 = Express();
// 设置我们的端口
常量端口= 3000；
app.get('/', (req, res) ⇒ res.send('欢迎来到Tutorialspoint！'));

// 在 http://localhost:3000 启动我们的应用程序
app.listen(port, () ⇒ console.log(`在端口 ${port} 上侦听的示例应用程序！`));

接下来，使用以下命令运行应用程序 -

$ npm 开始

您将收到如下图所示的确认信息 -

它通知 Express 应用程序正在运行。打开任意浏览器并使用http://localhost:3000访问应用程序。您将看到欢迎来到Tutorialspoint！文本如下所示 -

MEAN.JS - 构建静态路由节点 Express

本章演示使用Node和Express为应用程序构建路由。

在上一章中，我们创建了一个node-express应用程序。导航到名为mean-demo 的项目目录。使用以下命令转到目录 -

$ cd 平均演示

设置路线

通过使用传入请求的 URL，将路由用作映射服务。打开server.js文件并设置路由，如下所示 -

// 模块 ================================================= ==
const express = require('express');
常量应用程序 = Express();

// 设置我们的端口
常量端口= 3000；
app.get('/', (req, res) ⇒ res.send('欢迎来到Tutorialspoint！'));

//定义路线
app.get('/tproute', function (req, res) {
   res.send('这是使用 Node 和 Express 开发的应用程序的路由...');
});

// 在 http://localhost:3000 启动我们的应用程序
app.listen(port, () ⇒ console.log(`在端口 ${port} 上侦听的示例应用程序！`));

运行应用程序

接下来，使用以下命令运行应用程序 -

$ npm 开始

您将收到如下图所示的确认信息 -

现在，转到浏览器并输入http://localhost:3000/myroute。您将看到如下图所示的页面 -

MEAN.JS - 构建数据模型

在本章中，我们将演示如何在 Node-express 应用程序中使用数据模型。

MongoDB 是一个开源 NoSQL 数据库，以 JSON 格式保存数据。它使用面向文档的数据模型来存储数据，而不是像我们在关系数据库中使用的表和行。在本章中，我们将使用 Mongodb 来构建数据模型。

数据模型指定文档中存在哪些数据以及文档中应该存在哪些数据。参考MongoDB官方安装，安装MongoDB。

我们将使用之前的章节代码。您可以在此链接中下载源代码。下载 zip 文件；将其提取到您的系统中。打开终端并运行以下命令来安装 npm 模块依赖项。

$ cd 平均演示
$ npm 安装

将猫鼬添加到应用程序

Mongoose 是一个数据建模库，通过使 MongoDB 变得强大来指定数据的环境和结构。您可以通过命令行将 Mongoose 安装为 npm 模块。转到根文件夹并运行以下命令 -

$ npm install --save 猫鼬

上面的命令将下载新包并将其安装到node_modules文件夹中。--save标志会将此包添加到package.json文件中。

{
   “名称”：“意思_教程”，
   “版本”：“1.0.0”，
   "description": "这是 MEAN 堆栈的基本教程示例",
   “主要”：“服务器.js”，
   “脚本”：{
      “测试一下”
   },
   “关键字”：[
      “意思是”，
      “蒙戈”，
      “表达”，
      “有角”，
      “Node.js”
   ],
   “作者”：“马尼沙”，
   “许可证”：“ISC”，
   “依赖项”：{
      "express": "^4.17.1",
      “猫鼬”：“^5.5.13”
   }
}

设置连接文件

为了使用数据模型，我们将使用app/models文件夹。让我们创建模型Students.js，如下所示 -

var 猫鼬 = require('猫鼬');

// 定义我们的学生模型
// module.exports 允许我们在调用时将其传递给其他文件
module.exports = mongoose.model('学生', {
   名称：{类型：字符串，默认值：''}
});

您可以通过创建文件并在应用程序中使用它来设置连接文件。在config/db.js中创建一个名为db.js的文件。文件内容如下 -

模块. 导出 = {
   url : 'mongodb://localhost:27017/test'
}

这里的test是数据库名称。

这里假设您本地已经安装了MongoDB。安装后启动 Mongo 并按名称 test 创建一个数据库。该数据库将有一个按学生姓名排列的集合。向该集合插入一些数据。在我们的例子中，我们使用 db.students.insertOne( { name: 'Manisha' , place: 'Pune', Country: 'India'} ); 插入一条记录。

将db.js文件引入应用程序，即server.js中。文件内容如下所示 -

// 模块 ================================================= ==
const express = require('express');
常量应用程序 = Express();
var 猫鼬 = require('猫鼬');
// 设置我们的端口
常量端口= 3000；
// 配置 =============================================

// 配置文件
var db = require('./config/db');
console.log("正在连接--",db);
猫鼬.connect(db.url); //Mongoose 连接已创建

// 前端路由 ================================================ ===========
app.get('/', (req, res) ⇒ res.send('欢迎来到Tutorialspoint！'));

//定义路线
app.get('/tproute', function (req, res) {
   res.send('这是使用 Node 和 Express 开发的应用程序的路由...');
});

// 示例 API 路由
// 获取我们刚刚创建的学生模型
var Student = require('./app/models/student');
app.get('/api/students', 函数(req, res) {
   // 使用mongoose获取数据库中所有学生
   Student.find(函数(错误，学生) {
      // 如果检索出错，则发送错误。
      // res.send(err) 之后不会执行任何操作
      如果（错误）
         res.send(错误);
      res.json（学生）；// 以 JSON 格式返回所有学生
   });
});
// 在 http://localhost:3000 启动我们的应用程序
app.listen(port, () ⇒ console.log(`在端口 ${port} 上侦听的示例应用程序！`));

接下来，使用以下命令运行应用程序 -

$ npm 开始

您将收到如下图所示的确认信息 -

现在，转到浏览器并输入http://localhost:3000/api/students。您将看到如下图所示的页面 -

MEAN.JS - REST API

在本章中，我们将看到应用程序使用 HTTP 方法通过 REST API 与数据库进行交互。术语REST代表 REpresentational State Transfer，它是一种旨在与 Web 服务通信的架构风格，而API代表应用程序编程接口，允许应用程序之间进行交互。

首先，我们将创建 RESTful API 来获取所有项目、创建项目和删除项目。对于每个项目，_id将由 MongoDB 自动生成。下表描述了应用程序应如何从 API 请求数据 -

RESTful API 路由

我们将首先讨论 RESTful API 路由中的 Post 方法。

邮政

首先，我们通过 REST API 在 Student 集合中创建一条记录。这种特殊情况的代码可以在server.js文件中找到。作为参考，部分代码粘贴在这里 -

app.post('/api/students/send', function (req, res) {
   var Student = new Student(); // 创建学生模型的新实例
   学生.姓名 = 要求.身体.姓名; // 设置学生姓名（来自请求）
   学生.保存（函数（错误）{
      如果（错误）
         res.send(错误);
         res.json({ message: '学生已创建！' });
   });
});

执行

您可以在此链接中下载该应用程序的源代码。下载 zip 文件；将其提取到您的系统中。打开终端并运行以下命令来安装 npm 模块依赖项。

$ cd 平均恶魔消耗_rest_api
$ npm 安装

为了解析请求，我们需要主体解析器包。因此，运行以下命令以包含在您的应用程序中。

npm install --save body-parser

附加的源代码已经具有此依赖项，因此无需运行上述命令，它仅供您参考。

要运行该应用程序，请导航到新创建的项目目录并使用下面给出的命令运行 -

npm 启动

您将收到如下图所示的确认信息 -

有很多工具可以测试 API 调用，这里我们使用 Chrome 的用户友好扩展之一，称为Postman REST Client。

打开 Postman REST 客户端，输入 URL 作为http://localhost:3000/api/students/send，选择POST 方法。接下来，输入请求数据，如下所示 -

请注意，我们将名称数据作为x-www-form-urlencoded发送。这会将我们的所有数据作为查询字符串发送到节点服务器。

单击发送按钮创建学生记录。将出现一条成功消息，如下所示 -

得到

接下来，让我们从 mongodb 中获取所有学生记录。需要写以下路线。您可以在server.js文件中找到完整代码。

app.get('/api/students', 函数(req, res) {
   // 使用mongoose获取数据库中所有学生
   Student.find(函数(错误，学生) {
      // 如果检索出错，则发送错误。
      // res.send(err) 之后不会执行任何操作
      如果（错误）
         res.send(错误);
      res.json（学生）；// 以 JSON 格式返回所有学生
   });
});

接下来，打开 Postman REST 客户端，输入 URL 作为

http://localhost:3000/api/students，选择GET方式，点击发送按钮即可获取所有学生。

删除

接下来，让我们看看如何通过 REST api 调用从 mongo 集合中删除记录。

需要写以下路线。您可以在server.js文件中找到完整代码。

app.delete('/api/students/:student_id', function (req, res) {
   学生.删除({
      _id: req.params.student_id
   }，函数（错误，熊）{
      如果（错误）
         res.send(错误);
      res.json({ message: '删除成功' });
   });
});

接下来，打开 Postman REST 客户端，输入 URL 作为

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

（这里 5d1492fa74f1771faa61146d 是我们将从 Student 集合中删除的记录）。

选择DELETE方法并单击发送按钮以获取所有学生。

您可以通过对http://localhost:3000/api/students/5d1492fa74f1771faa61146d进行 GET 调用来检查 MongoDB 中是否有已删除的数据。

MEAN.JS - 应用程序中的角度组件

在本章中，我们将向应用程序添加角度组件。它是一个 Web 前端 JavaScript 框架，允许使用模型视图控制器 (MVC) 模式创建动态的单页应用程序。在 MEAN.JS架构章节中，您已经了解了 AngularJS 如何处理客户端请求并从数据库获取结果。

了解 AngularJS

AngularJS 是一个开源的 Web 应用程序框架，它使用 HTML 作为模板语言，并扩展了 HTML 的语法以清晰地表达您的应用程序组件。AngularJS 提供了一些基本功能，例如数据绑定、模型、视图、控制器、服务等。有关 AngularJS 的更多信息，请参阅此链接。

您可以通过在页面中添加 Angular 来使页面成为 Angular 应用程序。只需使用外部 JavaScript 文件即可添加，该文件可以下载，也可以直接使用 CDN 版本引用。

考虑我们已经下载了文件并通过添加到页面来在本地引用它，如下所示 -

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

现在，我们需要告诉 Angular 该页面是一个 Angular 应用程序。因此，我们可以通过向 <html> 或 <body> 标记添加属性 ng-app 来实现此目的，如下所示 -

<html ng-app>
或者
<body ng-app>

ng-app 可以添加到页面上的任何元素，但它通常被放入 <html> 或 <body> 标签中，以便 Angular 可以在页面内的任何位置工作。

Angular 应用程序作为模块

要使用 Angular 应用程序，我们需要定义一个模块。您可以在其中对与应用程序相关的组件、指令、服务等进行分组。模块名称由 HTML 中的 ng-app 属性引用。例如，我们将 Angular 应用程序模块名称称为 myApp，并且可以在 <html> 标签中指定，如下所示 -

<html ng-app="myApp">

我们可以通过在外部 JavaScript 文件中使用以下语句来创建应用程序的定义 -

angular.module('myApp', []); //[]参数指定模块定义中的依赖模块

定义控制器

AngularJS 应用程序依赖控制器来控制应用程序中的数据流。控制器是使用ng-controller指令定义的。

例如，我们将使用 ng-controller 指令以及您要使用的控制器的名称将控制器附加到主体。在下面的行中，我们使用控制器的名称作为“myController”。

<body ng-controller="myController">

您可以将控制器（myController）附加到 Angular 模块（myApp），如下所示 -

有角的
.module('myApp')
.controller('myController', 函数() {
   // 控制器代码在这里
});

为了可读性、可重用性和可测试性，最好使用命名函数而不是匿名函数。在下面的代码中，我们使用新的命名函数“myController”来保存控制器代码 -

var myController = 函数() {
   // 控制器代码在这里
};
有角的
.module('myApp')
.controller('myController', myController);

有关控制器的更多信息，请参阅此链接。

定义范围

Scope 是一个特殊的 JavaScript 对象，它将控制器与视图连接起来并包含模型数据。在控制器中，模型数据是通过 $scope 对象访问的。控制器函数采用 Angular 创建的 $scope 参数，它可以直接访问模型。

下面的代码片段指定如何更新控制器函数以接收 $scope 参数并设置默认值 -

var myController = 函数($scope) {
   $scope.message = "你好世界...";
};

有关控制器的更多信息，请参阅此链接。在下一章中，我们将开始使用 Angular 创建单页面应用程序。

MEAN.JS - 使用 Angular 构建单页面

在 MEAN 堆栈中，Angular 被称为第二个 JavaScript 框架，它允许以干净的模型视图控制器 (MVC) 方式创建单页面应用程序。

AngularJS 作为前端框架使用以下内容 -

• 使用 Bower 安装文件和库

• 使用 Angular 应用程序结构的控制器和服务

• 创建不同的 HTML 页面

• 使用ngRoute模块处理 AngularJS 应用程序的路由和服务

• 使用 Bootstrap 使应用程序更具吸引力

设置我们的 Angular 应用程序

让我们构建一个具有 Node.js 后端和 AngularJS 前端的简单应用程序。对于我们的 Angular 应用程序，我们需要 -

• 两个不同的页面（主页、学生）

• 每个都有不同的角度控制器

• 切换页面时不刷新页面

Bower 和拉入组件

我们的应用程序需要某些文件，例如 bootstrap 和 Angular。我们将告诉 Bower 为我们获取这些组件。

首先，在您的计算机上安装 Bower，在命令终端上执行以下命令 -

npm install -g 鲍尔

这将安装 Bower 并使其可以在您的系统上全局访问。现在将文件 .bowerrc 和 Bower.json 放在根文件夹下。在我们的例子中是mean-demo。两个文件的内容如下 -

.bowerrc -这将告诉 Bower 在哪里放置我们的文件 -

{
   “目录”：“公共/库”
}

Bower.json - 这与 package.json 类似，会告诉 Bower 需要哪些包。

{
   “名称”：“角度”，
   “版本”：“1.0.0”，
   “依赖项”：{
      "bootstrap": "最新",
      “角度”：“最新”，
      “角度路线”：“最新”
   }
}

接下来，使用以下命令安装 Bower 组件。您可以看到 Bower 拉入了public/libs下的所有文件。

$ 凉亭安装

我们的目录结构如下 -

平均演示
   -应用程序
   -配置
   -节点模块
   -民众
      -js
         --控制器
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -库
   - 意见
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -服务器.js

角度控制器

我们的控制器（public/js/controllers/MainCtrl.js）如下 -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = '欢迎来到 Angular 应用程序教程！';
});

控制器 public/js/controllers/StudentCtrl.js 如下 -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = '欢迎来到学生版块！';
});

角度路线

我们的路由文件（public/js/appRoutes.js）如下 -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', 函数($routeProvider, $locationProvider) {
   $routeProvider
      // 主页
      。什么时候（'/'， {
         templateUrl: 'views/home.html',
         控制器：“主控制器”
      })
      // 将使用 StudentController 的学生页面
      .when('/学生', {
         templateUrl: 'views/student.html',
         控制器：'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

现在我们有了控制器和路由，我们将把它们全部组合起来并将这些模块注入到我们的主public/js/app.js中，如下所示 -

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

查看文件

Angular使用模板文件，可以将其注入到index.html文件中的<div ng-view></div>中。ng-view 指令创建一个占位符，可以根据配置放置相应的视图（HTML 或 ng-template 视图）。有关角度视图的更多信息，请访问此链接。

当您准备好路由时，创建较小的模板文件并将它们注入到index.html文件中。index.html文件将包含以下代码片段 -

<!doctype html>
<html lang="en">
   <头>
      <元字符集=“UTF-8”>
      <基本href =“/”>
      <title>教程点 Node 和 Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- 自定义样式 -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- 角度自定义 -->
      <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>
   </头>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div 类=“容器”>
      
         <!-- 标题 -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">教程</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">学生</a></li>
            </ul>
         </导航>
         <!-- 角度动态内容 -->
         <div ng-view></div>
      </div>
   </正文>
</html>

运行应用程序

执行

您可以在此链接中下载该应用程序的源代码。下载 zip 文件；将其提取到您的系统中。打开终端并运行以下命令来安装 npm 模块依赖项。

$ cd 平均演示
$ npm 安装

接下来运行以下命令 -

$ 节点开始

您将收到如下图所示的确认信息 -

现在，转到浏览器并输入http://localhost:3000。您将看到如下图所示的页面 -

单击学生链接，您将看到如下屏幕 -

我们的 Angular 前端将使用模板文件并将其注入到我们的index.html文件中的 <div ng-view></div> 中。它将在不刷新页面的情况下完成此操作。

MEAN.JS - 构建 SPA：下一级别

在上一章中，我们已经看到了使用 Angularjs 创建单页meanjs应用程序。在本章中，我们来看看 Angular 应用程序如何使用 API 从 Mongodb 获取数据。

您可以在此链接中下载该应用程序的源代码。下载 zip 文件；将其提取到您的系统中。

我们的源代码的目录结构如下 -

平均演示
   -应用程序
      -楷模
         -student.js
   -配置
      -db.js
   -民众
      -js
         -控制器
            -MainCtrl.js
            -StudentCtrl.js
         -服务
            -StudentService.js
         -app.js
         -appRoutes.js
      - 意见
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -服务器.js

在此应用程序中，我们创建了一个视图 (home.html)，它将列出 Student 集合中的所有学生，允许我们创建新的学生记录并允许我们删除学生记录。所有这些操作都是通过 REST API 调用执行的。

打开终端并运行以下命令来安装 npm 模块依赖项。

$ npm 安装

接下来，使用以下命令安装 Bower 组件。可以看到bower拉入了public/libs下的所有文件。

$ 凉亭安装

应用程序的节点配置将保存在 server.js 文件中。这是节点应用程序的主文件，将配置整个应用程序。

// 模块 ================================================= ==
const express = require('express');
常量应用程序 = Express();
var bodyParser = require('body-parser');
var 猫鼬 = require('猫鼬');
var methodOverride = require('方法覆盖');
// 设置我们的端口
常量端口= 3000；
// 配置 =============================================
// 配置主体解析器
app.use(bodyParser.json()); // 解析应用程序/json

// 将 application/vnd.api+json 解析为 json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// 解析 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ 扩展: true }));

// 使用请求中的 X-HTTP-Method-Override 标头进行覆盖。
app.use(methodOverride('X-HTTP-Method-Override')); 模拟删除/放置

// 设置静态文件位置 /public/img 对于用户来说将是 /img
app.use(express.static(__dirname + '/public'));

// 配置文件
var db = require('./config/db');
console.log("正在连接--",db);
猫鼬.connect(db.url); //Mongoose 连接已创建

// 获取学生模型
var Student = require('./app/models/student');
函数 getStudents(res) {
   Student.find(函数(错误，学生){
      // 如果检索出错，则发送错误。res.send(err) 之后不会执行任何操作
         如果（错误）{
            res.send(错误);
         }
         res.json（学生）；// 以 JSON 格式返回所有待办事项
      });
   };
app.get('/api/studentslist', 函数(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var Student = new Student(); // 创建学生模型的新实例
   学生.姓名 = 要求.身体.姓名; // 设置学生姓名（来自请求）
   学生.保存（函数（错误）{
      如果（错误）
         res.send(错误);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   学生.删除({
      _id: req.params.student_id
      }，函数（错误，熊）{
         如果（错误）
            res.send(错误);
         getStudents(res);
      });
});
// 在 http://localhost:3000 启动我们的应用程序
app.listen(port, () ⇒ console.log(`在端口 ${port} 上侦听的示例应用程序！`));

定义前端路由

public /index.html文件将包含以下代码片段 -

<!doctype html>
<html lang="en">
   <头>
      <元字符集=“UTF-8”>
      <基本href =“/”>
      <title>教程点 Node 和 Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- 自定义样式 -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- 角度自定义 -->
      <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>
   </头>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div 类=“容器”>
         <!-- 标题 -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">教程</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">学生</a></li>
            </ul>
         </导航>
         
         <!-- 角度动态内容 -->
         <div ng-view></div>
      </div>
   </正文>
</html>

我们编写了一个服务来进行 API 调用并执行 API 请求。我们的服务StudentService如下所示 -

angular.module('StudentService', [])
// 超级简单的服务
// 每个函数返回一个promise对象
.factory('学生', ['$http',function($http) {
   返回 {
      获取：函数（）{
         返回 $http.get('/api/students');
      },
      创建：函数（学生）{
         return $http.post('/api/students/send', 学生);
      },
      删除：函数（id）{
         return $http.delete('/api/students/' + id);
      }
   }
}]);

我们的控制器（MainCtrl.js）代码如下 -

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','学生',函数($scope, $http, 学生) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   然后（函数（响应）{
      $scope.student = 响应.data;
   });
   // 创造
   // 提交add表单时，将文本发送到节点API
   $scope.createStudent = 函数() {
      // 验证 formData 以确保其中存在某些内容
      // 如果表单为空，则什么也不会发生
      如果（$scope.formData.name！=未定义）{
         $scope.loading = true;
         // 从我们的服务调用 create 函数（返回一个 Promise 对象）
         学生.create($scope.formData)
         // 如果创建成功，调用我们的get函数获取所有新的Student
         .then(函数（响应）{
            $scope.student = 响应.data;
            $scope.loading = false;
            $scope.formData = {}
         }，函数（错误）{
         });
      }
   };
   // 删除
   =================================================== ===============
   // 检查后删除待办事项
   $scope.deleteStudent = 函数(id) {
      $scope.loading = true;
      学生.删除(id)
      // 如果删除成功，调用我们的get函数来获取所有新的Student
      .then(函数(响应){
         $scope.loading = false;
         新学生名单
      });
   };
}]);

运行应用程序

导航到您的项目目录并运行下面给出的命令 -

$ npm 开始

现在导航到http://localhost:3000，您将看到如下图所示的页面 -

在文本框中输入一些文本，然后单击“添加”按钮。添加一条记录并显示如下 -

您可以通过选中复选框来删除记录。