MEAN.JS - 快速指南

---

---

MEAN.JS - 概述

什麼是 MEAN.js？

術語MEAN.js是一個用於構建動態網站和 Web 應用程式的全棧 JavaScript 開源解決方案。MEAN 是一個首字母縮略詞，代表MongoDB、Express、Node.js 和AngularJS，它們是 MEAN 堆疊的關鍵元件。

它最初是為了解決連線這些框架（Mongo、Express Nodejs、AngularJS）的常見問題，構建一個強大的框架來支援日常開發需求，並幫助開發人員在使用流行的 JavaScript 元件時採用更好的實踐而開發的。

堆疊意味著在後端使用資料庫和 Web 伺服器，在中間，您將擁有應用程式的邏輯和控制以及前端使用者的互動。

• MongoDB - 資料庫系統

• Express - 後端 Web 框架

• Node.js - Web 伺服器平臺

• AngularJS - 前端框架

歷史

MEAN 這個名稱是由 MongoDB 開發人員Valeri Karpov創造的。

為什麼要使用 MEAN.js？

• 它是一個開源框架，可免費使用。

• 它可以作為整個應用程式中的獨立解決方案。

• 它降低了開發成本，並提高了開發人員的靈活性和效率。

• 它支援 MVC 模式並使用 JSON 傳輸資料。

• 它提供了額外的框架、庫和可重用模組，以提高開發速度。

在我們開始進一步的概念之前，我們將瞭解MEAN.JS應用程式的基本構建塊。

MongoDB 簡介

在MEAN首字母縮略詞中，M代表 MongoDB，它是一個開源的 NoSQL 資料庫，以 JSON 格式儲存資料。它使用面向文件的資料模型來儲存資料，而不是像我們在關係資料庫中那樣使用表和行。它以二進位制 JSON（JavaScript 序列化物件表示法）格式儲存資料，以便在客戶端和伺服器之間輕鬆傳遞資料。MongoDB 基於集合和文件的概念。有關更多資訊，請參閱此連結 MongoDB。

Express 簡介

在MEAN首字母縮略詞中，E代表Express，它是一個靈活的 Node.js Web 應用程式框架，用於簡化開發過程。它易於配置和自定義，可以構建安全、模組化和快速的應用程式。它根據 HTTP 方法和 URL 指定應用程式的路由。您可以輕鬆連線到 MongoDB、MySQL、Redis 等資料庫。有關更多資訊，請參閱此連結 Express。

AngularJS 簡介

在MEAN首字母縮略詞中，A代表AngularJS，它是一個 Web 前端 JavaScript 框架。它允許以清晰的模型檢視控制器 (MVC) 方式建立動態的單頁應用程式。AngularJS 自動處理適合每個瀏覽器的 JavaScript 程式碼。有關更多資訊，請參閱此連結 AngularJS。

Node.js 簡介

在MEAN首字母縮略詞中，N代表Node.js，它是一個伺服器端平臺，用於開發影片流網站、單頁應用程式和其他 Web 應用程式等 Web 應用程式。它提供了豐富的各種 JavaScript 模組庫，在很大程度上簡化了使用 Node.js 開發 Web 應用程式的過程。它構建在 Google Chrome 的 V8 JavaScript 引擎之上，因此程式碼執行速度非常快。有關更多資訊，請參閱此連結 Node.js。

MEAN.JS - 架構

MEAN 是一個開源的 JavaScript 框架，用於構建動態網站和 Web 應用程式。它包括以下四個構建塊來構建應用程式。

• MongoDB - 它是一個文件資料庫，以靈活的、類似 JSON 的文件儲存資料。

• Express - 它是 Nodejs 的 Web 應用程式框架。

• Node.js - 它是 Web 伺服器平臺。它提供了豐富的各種 JavaScript 模組庫，簡化了 Web 應用程式的開發。

• AngularJS - 它是一個 Web 前端 JavaScript 框架。它允許以清晰的模型檢視控制器 (MVC) 方式建立動態的單頁應用程式。

有關這些的更多資訊，您可以參考概述章節。下圖描繪了 MEAN 堆疊應用程式的架構。

如上圖所示，我們有 AngularJS 作為客戶端語言，它處理客戶端的請求。

• 每當使用者發出請求時，它首先由 AngularJS 處理。

• 接下來，請求進入第二階段，我們有 Node.js 作為伺服器端語言，ExpressJS作為後端 Web 框架。

• Node.js處理客戶端/伺服器請求，ExpressJS向資料庫發出請求。

• 在最後階段，MongoDB（資料庫）檢索資料並將響應傳送到 ExpressJS。

• ExpressJS 將響應返回給 Nodejs，然後返回給 AngularJS，然後將響應顯示給使用者。

MEAN.JS - MEAN 專案設定

本章包括建立和設定 MEAN 應用程式。我們使用 NodeJS 和 ExpressJS 結合起來建立專案。

先決條件

在我們開始建立 MEAN 應用程式之前，我們需要安裝所需的先決條件。

您可以透過訪問 Node.js 網站 Node.js（適用於 Windows 使用者）來安裝最新版本的 Node.js。當您下載 Node.js 時，npm 會自動安裝到您的系統中。Linux 使用者可以使用此連結安裝 Node 和 npm。

使用以下命令檢查 Node 和 npm 的版本 -

$ node --version
$ npm --version

這些命令將顯示如下所示的版本 -

建立 Express 專案

使用 mkdir 命令建立專案目錄，如下所示 -

$ mkdir mean-demo //this is name of repository

以上目錄是 Node 應用程式的根目錄。現在，要建立 package.json 檔案，請執行以下命令 -

$ cd webapp-demo
$ npm init

init 命令將引導您完成建立 package.json 檔案的過程 -

此實用程式將引導您完成建立 package.json 檔案的過程。它僅涵蓋最常見的專案，並嘗試猜測合理的預設值。

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

單擊是，將生成如下所示的資料夾結構 -

-mean-demo
   -package.json

package.json檔案將包含以下資訊 -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

現在，要將 Express 專案配置到當前資料夾並安裝框架的配置選項，請使用以下命令 -

npm install express --save

轉到您的專案目錄並開啟 package.json 檔案，您將看到以下資訊 -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

在這裡您可以看到 express 依賴項已新增到檔案中。現在，專案結構如下 -

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

執行應用程式

導航到您新建立的專案目錄，並使用以下內容建立一個 server.js 檔案。

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at https://:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

接下來，使用以下命令執行應用程式 -

$ npm start

您將收到如下所示的確認 -

它通知 Express 應用程式正在執行。開啟任何瀏覽器並使用https://:3000訪問應用程式。您將看到如下所示的“歡迎使用 Tutorialspoint！”文字 -

MEAN.JS - 構建靜態路由 Node Express

本章演示了使用Node和Express為應用程式構建路由。

在上一章中，我們建立了一個 node-express 應用程式。導航到名為mean-demo的專案目錄。使用以下命令轉到該目錄 -

$ cd mean-demo

設定路由

路由透過使用傳入請求的 URL 作為對映服務。開啟server.js檔案並設定如下所示的路由 -

// modules =================================================
const express = require('express');
const app = express();

// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// startup our app at https://:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

執行應用程式

接下來，使用以下命令執行應用程式 -

$ npm start

您將收到如下所示的確認 -

現在，轉到瀏覽器並輸入https://:3000/myroute。您將看到如下所示的頁面 -

MEAN.JS - 構建資料模型

在本章中，我們將演示如何在我們的 Node-express 應用程式中使用資料模型。

MongoDB 是一個開源的 NoSQL 資料庫，它以 JSON 格式儲存資料。它使用面向文件的資料模型來儲存資料，而不是像我們在關係資料庫中那樣使用表和行。在本章中，我們使用 Mongodb 來構建資料模型。

資料模型指定文件中存在哪些資料，以及文件中應該存在哪些資料。參考官方 MongoDB 安裝，以安裝 MongoDB。

我們將使用我們上一章的程式碼。您可以從此連結下載原始碼。下載 zip 檔案；將其解壓縮到您的系統中。開啟終端並執行以下命令以安裝 npm 模組依賴項。

$ cd mean-demo
$ npm install

將 Mongoose 新增到應用程式

Mongoose 是一個數據建模庫，它透過使 MongoDB 強大起來來指定資料的環境和結構。您可以透過命令列將 Mongoose 安裝為 npm 模組。轉到您的根資料夾並執行以下命令 -

$ npm install --save mongoose

以上命令將下載新包並將其安裝到node_modules資料夾中。--save標誌會將此包新增到package.json檔案中。

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

設定連線檔案

要使用資料模型，我們將使用app/models資料夾。讓我們建立如下所示的模型students.js -

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

您可以透過建立檔案並在應用程式中使用它來設定連線檔案。在config/db.js中建立一個名為db.js的檔案。檔案內容如下 -

module.exports = {
   url : 'mongodb://:27017/test'
}

這裡test是資料庫名稱。

這裡假設您已在本地安裝了 MongoDB。安裝完成後，啟動 Mongo 並建立一個名為 test 的資料庫。此資料庫將有一個名為 students 的集合。向此集合中插入一些資料。在我們的例子中，我們使用 db.students.insertOne( { name: 'Manisha' , place: 'Pune', country: 'India'} );插入了一條記錄。

將db.js檔案引入應用程式，即在server.js中。檔案內容如下所示 -

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   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 students in JSON format
   });
});
// startup our app at https://:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

接下來，使用以下命令執行應用程式 -

$ npm start

您將收到如下所示的確認 -

現在，轉到瀏覽器並輸入https://:3000/api/students。您將看到如下所示的頁面 -

MEAN.JS - REST API

在本章中，我們將看到我們的應用程式如何透過 REST API 與我們的資料庫進行互動，方法是使用 HTTP 方法。術語REST代表 REpresentational State Transfer，它是一種旨在與 Web 服務通訊的體系結構風格，而API代表應用程式程式設計介面，它允許應用程式相互互動。

首先，我們將建立 RESTful API 來獲取所有專案、建立專案和刪除專案。對於每個專案，_id將由 MongoDB 自動生成。下表描述了應用程式如何從 API 請求資料 -

RESTful API 路由

我們首先討論 RESTful API 路由中的 Post 方法。

POST

首先，讓我們透過 REST API 在 Student 集合中建立一個記錄。此特定案例的程式碼可以在 server.js 檔案中找到。作為參考，這裡貼上了部分程式碼：

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);
         res.json({ message: 'student created!' });
   });
});

執行

您可以從此 連結 下載此應用程式的原始碼。下載 zip 檔案；將其解壓縮到您的系統中。開啟終端並執行以下命令以安裝 npm 模組依賴項。

$ cd mean-demon-consuming_rest_api
$ npm install

要解析請求，我們需要 body-parser 包。因此，執行以下命令將其包含在您的應用程式中。

npm install --save body-parser

附加的原始碼已包含此依賴項，因此無需執行上述命令，這隻供您參考。

要執行應用程式，請導航到您新建立的專案目錄並使用以下命令執行：

npm start

您將收到如下所示的確認 -

有很多工具可以測試 API 呼叫，這裡我們使用 Chrome 的一個使用者友好的擴充套件程式，名為 Postman REST Client。

開啟 Postman REST Client，將 URL 輸入為 https://:3000/api/students/send，選擇 POST 方法。接下來，輸入如下所示的請求資料：

請注意，我們將名稱資料作為 x-www-form-urlencoded 傳送。這會將我們所有資料作為查詢字串傳送到 Node 伺服器。

單擊 傳送 按鈕以建立學生記錄。將顯示如下所示的成功訊息：

GET

接下來，讓我們從 mongodb 獲取所有學生記錄。需要編寫以下路由。您可以在 server.js 檔案中找到完整程式碼。

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   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 students in JSON format
   });
});

接下來，開啟 Postman REST Client，將 URL 輸入為

https://:3000/api/students，選擇 GET 方法，然後單擊發送按鈕以獲取所有學生。

DELETE

接下來，讓我們看看如何透過 REST api 呼叫從我們的 mongo 集合中刪除記錄。

需要編寫以下路由。您可以在 server.js 檔案中找到完整程式碼。

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

接下來，開啟 Postman REST Client，將 URL 輸入為

https://:3000/api/students/5d1492fa74f1771faa61146d

（這裡 5d1492fa74f1771faa61146d 是我們將從 Student 集合中刪除的記錄）。

選擇 DELETE 方法，然後單擊 傳送 按鈕以獲取所有學生。

您可以透過對 https://:3000/api/students/5d1492fa74f1771faa61146d 進行 GET 呼叫來檢查 MongoDB 中的已刪除資料。

MEAN.JS - 應用程式中的 Angular 元件

在本章中，我們將嚮應用程式新增 Angular 元件。它是一個 Web 前端 JavaScript 框架，允許透過使用模型-檢視-控制器 (MVC) 模式建立動態的單頁應用程式。在 MEAN.JS 架構 章節中，您已經瞭解了 AngularJS 如何處理客戶端請求並從資料庫獲取結果。

瞭解 AngularJS

AngularJS 是一個開源的 Web 應用程式框架，它使用 HTML 作為模板語言，並擴充套件 HTML 的語法以清晰地表達您的應用程式元件。AngularJS 提供了一些基本功能，例如資料繫結、模型、檢視、控制器、服務等。有關 AngularJS 的更多資訊，請參閱此 連結。

您可以透過在頁面中新增 Angular 來使頁面成為 Angular 應用程式。只需使用一個外部 JavaScript 檔案即可新增它，該檔案可以下載或直接使用 CDN 版本引用。

假設我們已下載檔案並透過以下方式將其本地新增到頁面中：

<script src="angular.min.js"></script>

現在，我們需要告訴 Angular 此頁面是一個 Angular 應用程式。因此，我們可以透過向 <html> 或 <body> 標記新增一個屬性 ng-app 來做到這一點，如下所示：

<html ng-app>
or
<body ng-app>

ng-app 可以新增到頁面上的任何元素，但通常將其放在 <html> 或 <body> 標記中，以便 Angular 可以工作在頁面的任何位置。

Angular 應用程式作為模組

要使用 Angular 應用程式，我們需要定義一個模組。它是一個可以將與應用程式相關的元件、指令、服務等分組的地方。模組名稱由 HTML 中的 ng-app 屬性引用。例如，我們將 Angular 應用程式模組名稱稱為 myApp，並且可以在 <html> 標記中指定，如下所示：

<html ng-app="myApp">

我們可以使用以下語句在外部 JavaScript 檔案中建立應用程式的定義：

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

定義控制器

AngularJS 應用程式依賴於控制器來控制應用程式中資料流。控制器是透過使用 ng-controller 指令定義的。

例如，我們將透過使用 ng-controller 指令以及要使用的控制器的名稱將控制器附加到 body。在下面一行中，我們使用“myController”作為控制器的名稱。

<body ng-controller="myController">

您可以將控制器 (myController) 附加到 Angular 模組 (myApp)，如下所示：

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

最好使用命名函式而不是匿名函式來提高可讀性、可重用性和可測試性。在下面的程式碼中，我們使用新的命名函式“myController”來儲存控制器程式碼：

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

有關控制器的更多資訊，請參閱此 連結。

定義作用域

作用域是一個特殊的 JavaScript 物件，它將控制器與檢視連線起來，幷包含模型資料。在控制器中，模型資料是透過 $scope 物件訪問的。控制器函式採用 $scope 引數，該引數由 Angular 建立，它允許直接訪問模型。

以下程式碼片段指定了如何更新控制器函式以接收 $scope 引數並設定預設值：

var myController = function($scope) {
   $scope.message = "Hello World...";
};

有關控制器的更多資訊，請參閱此 連結。在下一章中，我們將開始使用 Angular 建立單頁應用程式。

MEAN.JS - 使用 Angular 構建單頁應用程式

在 MEAN 棧中，Angular 被稱為第二個 JavaScript 框架，它允許以乾淨的模型-檢視-控制器 (MVC) 方式建立單頁應用程式。

AngularJS 作為前端框架使用以下內容：

• 使用 Bower 安裝檔案和庫

• 使用控制器和服務構建 Angular 應用程式結構

• 建立不同的 HTML 頁面

• 使用 ngRoute 模組處理 AngularJS 應用程式的路由和服務

• 使用 Bootstrap 使應用程式更具吸引力

設定我們的 Angular 應用程式

讓我們構建一個簡單的應用程式，它具有 Node.js 後端和 AngularJS 前端。對於我們的 Angular 應用程式，我們將需要：

• 兩個不同的頁面（首頁、學生）

• 每個頁面都有一個不同的 Angular 控制器

• 切換頁面時不重新整理頁面

Bower 和引入元件

我們的應用程式將需要某些檔案，例如 bootstrap 和 angular。我們將告訴 bower 為我們獲取這些元件。

首先，在您的機器上安裝 bower，在您的命令終端上執行以下命令：

npm install -g bower

這將安裝 bower 並使其在您的系統上全域性可用。現在將 .bowerrc 和 bower.json 檔案放在您的根資料夾下。在我們的例子中，它是 mean-demo。這兩個檔案的原始內容如下：

.bowerrc - 這將告訴 Bower 將我們的檔案放在哪裡：

{
   "directory": "public/libs"
}

bower.json - 這類似於 package.json，並將告訴 Bower 需要哪些包。

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

接下來，使用以下命令安裝 Bower 元件。您可以看到 bower 將所有檔案拉到 public/libs 下。

$ bower install

我們的目錄結構如下：

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Angular 控制器

我們的控制器 (public/js/controllers/MainCtrl.js) 如下所示：

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

控制器 public/js/controllers/StudentCtrl.js 如下所示：

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Angular 路由

我們的路由檔案 (public/js/appRoutes.js) 如下所示：

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

現在我們有了控制器和路由，我們將把它們組合起來並將這些模組注入我們的主 public/js/app.js 中，如下所示：

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

檢視檔案

Angular 使用模板檔案，該檔案可以注入到 index.html 檔案中的 <div ng-view></div> 中。ng-view 指令建立一個佔位符，根據配置，可以在其中放置相應的檢視（HTML 或 ng-template 檢視）。有關 Angular 檢視的更多資訊，請訪問此 連結。

當您準備好路由後，建立更小的模板檔案並將它們注入 index.html 檔案中。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/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>

執行應用程式

執行

您可以從此 連結 下載此應用程式的原始碼。下載 zip 檔案；將其解壓縮到您的系統中。開啟終端並執行以下命令以安裝 npm 模組依賴項。

$ cd mean-demo
$ npm install

接下來執行以下命令：

$ node start

您將收到如下所示的確認 -

現在，轉到瀏覽器並輸入 https://:3000。您將看到如下所示的頁面：

單擊 學生 連結，您將看到如下螢幕：

我們的 Angular 前端將使用模板檔案並將其注入到我們 index.html 檔案中的 <div ng-view></div> 中。它將在不重新整理頁面的情況下執行此操作。

MEAN.JS - 構建 SPA：更高級別

在上一章中，我們已經看到了使用 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 集合中的所有學生，允許我們建立新的 學生 記錄並允許我們刪除學生記錄。所有這些操作都是透過 REST API 呼叫執行的。

開啟終端並執行以下命令以安裝 npm 模組依賴項。

$ npm install

接下來，使用以下命令安裝 Bower 元件。您可以看到 bower 將所有檔案拉到 public/libs 下。

$ bower install

應用程式的節點配置將儲存在 server.js 檔案中。這是 node 應用程式的主檔案，將配置整個應用程式。

// 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 https://: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

現在導航到 https://:3000，您將看到如下所示的頁面：

在文字框中輸入一些文字，然後單擊 新增 按鈕。將新增一條記錄並顯示如下：

您可以透過選中複選框來刪除記錄。