溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
AngularJS 是一款用于構建單頁面應用程序（SPA）的 JavaScript 框架，而 MongoDB 是一個流行的 NoSQL 數據庫。要在 AngularJS 應用程序中與 MongoDB 進行數據交互，通常需要使用 Node.js 作為后端服務器，因為它提供了與 MongoDB 交互所需的驅動程序。
以下是一個簡單的示例，展示了如何在 AngularJS 應用程序中使用 Node.js 和 MongoDB 進行數據交互：
mkdir angular-mongodb-app
cd angular-mongodb-app
npm init -y
npm install express mongodb body-parser
server.js 的文件，用于設置后端服務器：const express = require('express');
const bodyParser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const app = express();
app.use(bodyParser.json());
const url = 'mongodb://localhost:27017';
const dbName = 'myDatabase';
let db;
MongoClient.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }, (err, client) => {
if (err) return console.log(err);
console.log('Connected to MongoDB');
db = client.db(dbName);
});
app.get('/api/data', (req, res) => {
db.collection('myCollection').find({}).toArray((err, result) => {
if (err) return console.log(err);
res.json(result);
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在這個例子中，我們創建了一個簡單的 Express 服務器，它監聽 3000 端口。服務器有一個名為 /api/data 的端點，用于從名為 myCollection 的 MongoDB 集合中獲取數據。
index.html 的文件，用于設置 AngularJS 應用程序：<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myController">
<h1>AngularJS & MongoDB Data Interaction</h1>
<ul>
<li ng-repeat="item in data">{{ item._id }} - {{ item.name }}</li>
</ul>
</body>
</html>
app.js 的文件，用于設置 AngularJS 應用程序的邏輯：const app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http', function($scope, $http) {
$http.get('http://localhost:3000/api/data').then(function(response) {
$scope.data = response.data;
});
}]);
在這個例子中，我們創建了一個名為 myApp 的 AngularJS 應用程序，并定義了一個名為 myController 的控制器。控制器使用 $http 服務從我們在步驟 2 中創建的后端服務器獲取數據，并將其存儲在 $scope.data 變量中。然后，我們使用 ng-repeat 指令在頁面上顯示數據。
node server.js
index.html 文件，你應該能看到從 MongoDB 獲取的數據已顯示在頁面上。這就是一個簡單的示例，展示了如何在 AngularJS 應用程序中使用 Node.js 和 MongoDB 進行數據交互。你可以根據需要擴展此示例，例如添加更多的端點、驗證和數據操作功能。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
