logo图片
MEAN.JS教程

MEAN.JS 构建SPA

在上一章中,我们看到了使用 Angularjs 创建单页 meanjs 应用程序。在本章中,让我们看看 Angular 应用程序如何使用 API 从 Mongodb 中获取数据。
您可以在此链接中下载此应用程序的源代码。下载压缩文件;在您的系统中提取它。
我们源代码的目录结构如下-
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 pull了public/libs下的所有文件。
$ bower install
应用程序的节点配置将保存在 server.js 文件中。这是节点应用程序的主文件,将配置整个应用程序。
// 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}!`));

定义前端路由

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', [])
// 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);
      }
   }
}]);
我们的控制器(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 
   // 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
      });
   };
}]);

运行应用程序

导航到您的项目目录并运行下面给出的命令-
$ npm start
现在导航到 http://localhost:3000,您将获得如下图所示的页面-
运行应用程序页面
在文本框中输入一些文本,然后单击 添加按钮。一条记录被添加并显示如下-
运行应用程序添加按钮
您可以通过选中复选框来删除记录。
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4