實(shí)戰(zhàn)：AngularJS與MongoDB的數(shù)據(jù)交互

發(fā)布時(shí)間：2024-10-02 15:48:47 來(lái)源：億速云閱讀：81 作者：小樊欄目：web開(kāi)發(fā)

AngularJS 是一款用于構(gòu)建單頁(yè)面應(yīng)用程序（SPA）的 JavaScript 框架，而 MongoDB 是一個(gè)流行的 NoSQL 數(shù)據(jù)庫(kù)。要在 AngularJS 應(yīng)用程序中與 MongoDB 進(jìn)行數(shù)據(jù)交互，通常需要使用 Node.js 作為后端服務(wù)器，因?yàn)樗峁┝伺c MongoDB 交互所需的驅(qū)動(dòng)程序。

以下是一個(gè)簡(jiǎn)單的示例，展示了如何在 AngularJS 應(yīng)用程序中使用 Node.js 和 MongoDB 進(jìn)行數(shù)據(jù)交互：

首先，確保已安裝 Node.js 和 MongoDB。接下來(lái)，創(chuàng)建一個(gè)新的 Node.js 項(xiàng)目并安裝所需的依賴項(xiàng)：

mkdir angular-mongodb-app
cd angular-mongodb-app
npm init -y
npm install express mongodb body-parser

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 server.js 的文件，用于設(shè)置后端服務(wù)器：

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');
});

在這個(gè)例子中，我們創(chuàng)建了一個(gè)簡(jiǎn)單的 Express 服務(wù)器，它監(jiān)聽(tīng) 3000 端口。服務(wù)器有一個(gè)名為 /api/data 的端點(diǎn)，用于從名為 myCollection 的 MongoDB 集合中獲取數(shù)據(jù)。

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 index.html 的文件，用于設(shè)置 AngularJS 應(yīng)用程序：

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

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 app.js 的文件，用于設(shè)置 AngularJS 應(yīng)用程序的邏輯：

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;
  });
}]);

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 myApp 的 AngularJS 應(yīng)用程序，并定義了一個(gè)名為 myController 的控制器?？刂破魇褂?$http 服務(wù)從我們?cè)诓襟E 2 中創(chuàng)建的后端服務(wù)器獲取數(shù)據(jù)，并將其存儲(chǔ)在 $scope.data 變量中。然后，我們使用 ng-repeat 指令在頁(yè)面上顯示數(shù)據(jù)。

啟動(dòng)后端服務(wù)器：

node server.js

在瀏覽器中打開(kāi) index.html 文件，你應(yīng)該能看到從 MongoDB 獲取的數(shù)據(jù)已顯示在頁(yè)面上。

這就是一個(gè)簡(jiǎn)單的示例，展示了如何在 AngularJS 應(yīng)用程序中使用 Node.js 和 MongoDB 進(jìn)行數(shù)據(jù)交互。你可以根據(jù)需要擴(kuò)展此示例，例如添加更多的端點(diǎn)、驗(yàn)證和數(shù)據(jù)操作功能。

向AI問(wèn)一下細(xì)節(jié)

實(shí)戰(zhàn)：AngularJS與MongoDB的數(shù)據(jù)交互

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽