MongoDB 更新 AngularJS 视图时，数据在 MongoDB 中发生变化

在本文中，我们将介绍如何在 MongoDB 中的数据发生变化时，更新 AngularJS 视图。MongoDB 是一个流行的 NoSQL 数据库，而 AngularJS 是一个强大的前端 JavaScript 框架。结合使用 MongoDB 和 AngularJS，可以实现实时更新视图的功能。我们将通过示例代码来演示这一过程。

阅读更多：MongoDB 教程

创建 MongoDB 数据库和集合

首先，我们需要在 MongoDB 中创建一个数据库和一个集合来存储我们的数据。可以使用以下命令来完成此操作：

use mydb

db.createCollection("users")

上述命令将创建一个名为 “mydb” 的数据库，并在其中创建一个名为 “users” 的集合。

插入初始数据

接下来，我们将向 “users” 集合中插入一些初始数据。可以使用以下命令完成此操作：

db.users.insertMany([
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
])

上述命令将向 “users” 集合中插入三个文档，每个文档包含一个名为 “name” 的字段和一个名为 “age” 的字段。

创建 AngularJS 应用

现在，让我们创建一个简单的 AngularJS 应用来展示从 MongoDB 中获取的数据。

首先，在HTML文件中引入必要的 AngularJS 脚本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

然后，在同一个HTML文件中，添加以下代码来定义 AngularJS 控制器和视图：

<div ng-app="myApp" ng-controller="myCtrl">
  <p ng-repeat="user in users">{{ user.name }} - {{ user.age }}</p>
</div>

<script>
  var app = angular.module("myApp", []);

  app.controller("myCtrl", function( $scope,$ http) {
     $http.get("/api/users").then(function(response) {$ scope.users = response.data;
    });
  });
</script>

上述代码创建了一个名为 “myApp” 的 AngularJS 应用，并定义了一个名为 “myCtrl” 的控制器。控制器使用 $http 服务从名为 “/api/users” 的接口获取数据，并将数据传递给视图进行展示。

创建 Node.js 服务器

为了提供 “/api/users” 接口，我们需要创建一个简单的 Node.js 服务器。

首先，创建一个名为 “server.js” 的文件，然后添加以下代码：

const express = require("express");
const app = express();
const mongodb = require("mongodb");
const MongoClient = mongodb.MongoClient;

const url = "mongodb://localhost:27017";
const dbName = "mydb";

app.get("/api/users", function(req, res) {
  MongoClient.connect(url, function(err, client) {
    if (err) {
      console.log("Failed to connect to MongoDB:", err);
      return res.status(500).send("Failed to connect to MongoDB.");
    }

    const db = client.db(dbName);

    db.collection("users")
      .find({})
      .toArray(function(err, users) {
        if (err) {
          console.log("Failed to fetch users:", err);
          return res.status(500).send("Failed to fetch users.");
        }

        res.send(users);
      });

    client.close();
  });
});

app.listen(3000, function() {
  console.log("Server is listening on port 3000");
});

上述代码使用 Express 框架创建了一个简单的服务器，监听在端口 3000 上。当收到 “/api/users” 的 GET 请求时，服务器会连接到 MongoDB 中的 “mydb” 数据库，查询 “users” 集合中的所有文档，并将结果返回给客户端。

运行应用

最后，运行以下命令来启动应用程序：

node server.js

打开浏览器并访问 “http://localhost:3000″，您将看到一个包含从 MongoDB 中获取的用户数据的列表。

更新数据并实时更新视图

现在，让我们尝试向数据库中插入新数据，并查看视图是否实时更新。

在 MongoDB 数据库中插入一条新用户数据，可以使用以下命令：

db.users.insertOne({ name: "David", age: 40 })

刷新浏览器页面，您将看到列表中新增加了一个用户 “David”。

总结

本文介绍了如何在 MongoDB 中的数据发生变化时，实时更新 AngularJS 视图。通过创建 MongoDB 数据库和集合，插入初始数据，创建 AngularJS 应用和 Node.js 服务器，以及使用 AngularJS 的 $http 服务从 MongoDB 中获取数据，我们能够实现这一目标。利用这种方法，我们可以轻松地构建具有实时更新功能的应用程序。