MEAN: AngularJS + NodeJS的REST API開發教程
Node.JS
https://www.jdon.com/idea/nodejs/web-app-with-angularjs-and-rest-api-with-node.html
Mean是一個熱門，本教程展示前端使用Angular.js訪問后端Node.js編程的REST API。步驟如下：
- 創建一個單頁應用(SPA:Single Page Application)創建和刪除所有“任務",任務是一個業務案例。
- 保存任務到數據庫 (MongoDB/Mongoose)
- 使用ExpressJS 作為 Node的Web框架
- 使用Node創建一個RESTful API
- 使用AngularJS作為前端調用REST API
首先，我們創建Angular+Node.jS的如下文件結構：
- main.js 是包含所有前端邏輯，有Angular JS處理器和通過AJAX調用API獲得內容或刪除內容等。
- index.html 這是一個單個html文件，所有的單頁應用都是基于這個文件
- Server.js是我們的Node文件，放置服務器配置和REST API的路由配置。
- package.JSON 這是應用數據的文件。放置Node的依賴配置
第一步
我們從配置package.json開始，需要加入Express和Mongoose:
然后，在NodeJS控制臺輸入install npm，將這兩個包安裝完成。
第二步
我們開始配置server.js ，這是服務器的主文件和路由配置文件，包括數據庫連接的實現都在這個文件代碼中實現，編寫javascript代碼如下：
這段代碼首先引入Express和Mongoose兩個庫包，然后實現數據庫連接。啟動服務器在8080端口。
第三步
建立一個業務模型的數據庫，業務模型是 任務或"ToDos". 使用Mongoose 實現，模型內容很簡單，“任務”只有一個"Text" 屬性，代碼插入到server.js ，注意是在服務器啟動監聽之前。
第四步
建立REST API的路由，REST定義如下：
|
HTTP |
URL |
Description |
| GET | / api/all | 返回所有任務 |
| POST | / api/all | 創建一個任務 |
| DELETE | / api/all: all | 刪除一個任務 |
在進入代碼實現這段API之前，我們先了解一下整個MEAN的流程：
前端Angular使用Ajax調用我們后端NodeJS的API. 然后向數據庫(Mongo)查詢。然后返回查詢結果給 Node，NodeJS再作為JSON輸出給Angular，后者將其顯示在前端，無需刷新頁面，因為是更新了Html的DOM，這就是一個單頁應用SPA。
在server.js文件的服務器啟動監聽之前加入路由配置：
Mongoose能夠提供查找 (find), 殺出 (remove) 和創建 (create)簡單實現方式，最后一行路由不是用來實現API，而是負責顯示執行前端邏輯的html。
后端工作都已經完成，下面進入前端。
第五步
首先在main.js創建一個模板定義這個應用：
|
1
|
var angularTodo = angular.module('angularTodo', []);
|
下面加入mainController代碼：
這段代碼中 $scope 是所有變量存儲的地方，活動周期是和控制器一樣，在html中如果有 -ng controller = "mainController"標簽語法，那么這個標簽內部的所有東西都是 $scope中對象控制，或者說相對應。
$ http 是用來實現對后端API進行 AJAX 調用。
使用以上兩個對象，我們創建了三個函數，發出三種請求： API GET 獲得所有數據項, POST 是創建一個新數據項，而 DELETE 是刪除數據項.
第六步
最好我們編制Html文件，需要加入Angular的激活標簽 -ng app. 我們可以加入到html語法tag < html> 中：
<html ng-app="angularTodo">...</html>
一個應用可以有多個控制器，在這里例子中我們只有一個叫mainController , 我們認為HTML作為視圖顯示都是為這個控制器服務的，因此需要加上-ng controller .在<body>中加入：
<body ng-controller="mainController">...</body>
為了顯示GET的所有數據，需要使用 ng-repeat語法遍歷數據集合：
上述代碼中顯示數據項時，每一行后面有一個刪除checkbox，是用來實現刪除數據的。ng-click是在用戶點按html元素后發出一個事件，我們可用來調用后端API。
最后，我們要創建一個頁面用來輸入數據，通過POST提交到后端，需要使用ng-model,其中包含的是我們的業務數據，而在提交按鈕上的 ng-click 被點擊后會調用控制器的createTodo() ，然后由其提交到后端。
最后，整個index.html代碼如下：
浙公網安備 33010602011771號