❮ MEAN.JS 使用 Angular 构建单页 MEAN.JS 快速指南 ❯

MEAN.JS - 构建 SPA:下一个级别

更新于 2025/1/23 23:37:17

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

您可以在此链接中下载此应用程序的源代码。下载 zip 文件;将其解压到您的系统中。

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

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

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

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

$ npm install

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

$ bower install

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

// 模块 ====================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// 设置我们的端口
const port = 3000;
// 配置 =================================================
// 配置 body parser
app.use(bodyParser.json()); // 解析 application/json

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

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

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

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

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

// 获取学生模型
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // 如果检索时出现错误，则发送错误。res.send(err) 之后不会执行任何操作
         if (err) {
            res.send(err);
         }
         res.json(students); // 以 JSON 格式返回所有 todo
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // 创建一个新的学生模型实例
   student.name = req.body.name; // 设置学生姓名(来自请求)
   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);
      });
});
// 在 http://localhost:3000 启动我们的应用程序
app.listen(port, () ⇒ console.log(`示例应用程序监听端口 ${port}!`));

定义前端路由

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

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

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

angular.module('StudentService', [])
// 超级简单的服务
// 每个函数都返回一个 promise 对象
.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);
      }
   }
}]);

我们的控制器(MainCtrl.js)代码如下 −

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 
   // 提交添加表单时，将文本发送到节点 API
   $scope.createStudent = function() {
    // 验证 formData 以确保其中有内容
    // 如果表单为空，则不会发生任何事情
    if ($scope.formData.name != undefined) {
        $scope.loading = true;
        // 从我们的服务调用创建函数(返回一个承诺对象)
        Student.create($scope.formData)
        // 如果创建成功，则调用我们的 get 函数来获取所有新的 Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // 检查后删除待办事项
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // 如果成功删除，则调用我们的 get 函数来获取所有新的 Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);