> 原文地址?[https://blog.udemy.com/node-js-tutorial](https://blog.udemy.com/node-js-tutorial)
> 感謝來自Udemy的Samantha來信分享
## 添加一個新視頻
在這一部分中，你將學習更多關于在Express中創建API端點，利用Angular構建表單，用Monk在Mongo中存儲文檔。
類似于上一節，我們將在隨后幾步中將從前端到后端實現這一功能。首先，我們將創建一個添加視頻的API。我們將使用Express路由創建此端點并用Monk存儲視頻文件在Mongo中。然后，我們將創建一個新的頁面來添加一個視頻并用Angular來構建這個頁面。
讓我們開始吧。
### 第1步：創建1個API端點
打開?**routes>videos.js**?然后在文件后面和?**module.exports**?前面新增路由（記住，module.exports 應該是模塊中的最后一行）：
~~~
router.post('/', function(req, res){
var collection = db.get('videos');
collection.insert({
title: req.body.title,
description: req.body.description
}, function(err, video){
if (err) throw err;
res.json(video);
});
});
~~~
這些代碼和之前有些類似。讓我回顧一下重要的部分。首先，注意router.post方法的用法。在最后一節，我們使用router.get方法來處理一個HTTP GET請求。這里，我們使用REST約定中用來創建對象的 HTTP POST請求。
在路由處理器中，首先我們獲得了一個?**videos**?集合的引用，然后使用?**insert**方法在Mongo中添加一個新的文檔。
這個方法的第1個參數是一個JSON對象，它有兩個屬性：?**title**?和?**description**。我們用?**req.body**?從這些屬性中讀取值。它代表數據將被提交到請求的body中。
最后，在回調方法中新增一個文檔，如果我們沒有獲取任何錯誤，我們使用response（res）的?**json**方法來返回一個新增的用JSON表示的視頻文檔。
### 第2步：創建一個表單
現在API已經準備好了。我們需要一個表單來新增一個視頻。
在?**public > partials**?目錄下創建一個新的視圖?**video-form.html**?。在文件中輸入以下代碼：
~~~
<h1>Add a Video</h1>
<form>
<div>
<label>Title</label>
<input></input>
</div>
<div>
<label>Description</label>
<textarea></textarea>
</div>
<input type="button" value="Save"></input>
</form>
~~~
現在當用戶跳轉到?**/add-video**?時我們需要告訴Angular來展示這個視圖。所以需要一個新的路由。
打開?**vidzy.js**?并且更新路由配置如下：
~~~
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
})
.when('/add-video', {
templateUrl: 'partials/video-form.html'
})
.otherwise({
redirectTo: '/'
});
}]);
~~~
注意這里我們還沒有配置controller，因為我們還沒有寫controller，我們在下一步中設置。
視圖和路由已經準備好了。最后，我們添加一個鏈接?**/add-video**?在首頁中。打開**partials>home.html**?在?**UL**?標簽前面添加1個新的鏈接：
~~~
<p>
<a href="/#/add-video">Add a Video</a>
</p>
~~~
注意在Angular應用中需要在鏈接前添加?**/#**。這是為了兼容老的不支持單頁應用的瀏覽器。
讓我們預覽一下目前為止我們開發的頁面。回到瀏覽器并刷新首頁。你將看到添加一個視頻的鏈接。點擊鏈接可以看到添加視頻的頁面。
不得不說這個表單看起來真的很丑并且和真正應用的表單看起來差別很大。讓我們給它一個漂亮、現代化的外觀。
### 第3步：添加Bootstrap
我們將使用Bootstrap來為表單添加一些樣式。如果你不熟悉Bootstrap，簡單解釋一下，它是一個用來構建現代和響應式web應用的前端CSS框架。在這個步驟中，我們將引用Bootstrap CSS文件，通過Bootstrap類來裝飾我們的表單元素。
打開?**views > layout.jade**
在?**head**?標簽的最后一行添加
~~~
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
~~~
確認它和上一行有同樣的縮進空格數
現在回到?**partials > video-form.html**。添加下面的類到HTML元素：
~~~
<h1>Add a Video</h1>
<form>
<div class="form-group">
<label>Title</label>
<input class="form-control"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control"></textarea>
</div>
<input type="button" class="btn btn-primary" value="Save"></input>
</form>
~~~
這些都是標準的Bootstrap用來創建表單的類。更多關于怎樣用Bootstrap創建現代表單的例子，請查看[Bootstrap 文檔](http://getbootstrap.com/)
回到瀏覽器并刷新頁面。
[](http://yalishizhude.github.io/2015/11/19/mean-4/add.png)
現在看起來好多了。
這個表單還沒有行為。如果你點擊保存按鈕的話什么也不會發生，這就是我們下一步將要添加的功能。
### 第4步：實現控制器
正如我之前所說，在MVC框架中，一個控制器主要處理視圖中的事件。我們將創建一個Angular控制器來處理保存按鈕的點擊事件。
打開?**vidzy.js**?并在文件末尾輸入下列代碼
~~~
app.controller('AddVideoCtrl', ['$scope', '$resource', '$location',
function($scope, $resource, $location){
$scope.save = function(){
var Videos = $resource('/api/videos');
Videos.save($scope.video, function(){
$location.path('/');
});
};
}]);
~~~
這個控制器有3個依賴：**$scope**是控制器和視圖之間的膠水，**$resource**用來調用RESTful API，**$location**用來改變瀏覽器地址欄的URL。所有這些已經在Angular服務中構建。
在控制器中，我們在?**$scope**?上定義?**save**?方法。這個方法將在用戶點擊保存按鈕時被調用。稍后將它掛載在視圖上，先來看看方法中的邏輯。
首先，我們調用?**$resource**?方法來傳遞API中的地址（**/api/videos**），返回一個對象來與API交互。在最后一節中，我們使用?**query**?方法來獲取所有的視頻。這里，我們使用?**save**?方法來提交一個視頻給API。
**videos.save**?方法需要兩個參數：用來提交的對象和回調函數（當異步調用執行完成時調用）。在回調函數中，我們使用?**$location**?服務來修改瀏覽器地址到網站的根路徑。Angular知道根URL是綁定到home視圖的。它將展示home頁面給用戶。
打開?**partials > videos-form.html**?如下修改input域
~~~
<div class="form-group">
<label>Title</label>
<input class="form-control" ng-model="video.title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" ng-model="video.description"></textarea>
</div>
~~~
**ng-model**屬性是另一個用來綁定數據的指令。通過它，我們告訴Angular如果用戶點擊這個按鈕，它將自動更新引用$scope的屬性。在第一個例子中，當文本框的值改變時，Angular將自動修改**$scope.video.title**。
接下來修改按鈕的聲明如下：
~~~
<input type="button" class="btn btn-primary" value="Save" ng-click="save()"></input>
~~~
**ng-click**屬性也是Angular的另一個用來處理HTML元素點擊事件的指令。通過這個指令，我們告訴Angular如果用戶點擊這個按鈕，它將執行?**$scope**上的?**save**方法。
最后在路由中注冊一個新的控制器
~~~
.when('/add-video', {
templateUrl: 'partials/video-form.html',
controller: 'AddVideoCtrl'
})
~~~
現在已經完成了，測試一下這個應用。回到瀏覽器，填寫并提交表單。你將在列表中看到一個新的視頻。
快速總結一下這一節中學到的知識。我們用Express創建了一個新的API端點然后使用Monk來存儲一個視頻文檔到Mongo。然后，我們創建了一個Angular視圖并通過表單添加一個視頻。我們通過使用Bootstrap來美化了表單。最后，我們創建控制器來處理視圖中的點擊事件。在處理點擊事件中，我們使用?**$resource**服務來提交數據給服務端。
在下一節中，我們將添加一個編輯功能。
如果覺得閱讀這篇文章有收獲，不妨點個贊吧^_^
