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，您将看到如下图所示的页面 -

运行应用程序页面

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

运行应用程序添加按钮

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