使用Angular 四、Bootstrap 四、TypeScript和ASP.NET Core開發的Apworks框架案例應用：Task List

最近我爲我本身的應用開發框架Apworks設計了一套案例應用程序，並以Apache 2.0開源，開源地址是：https://github.com/daxnet/apworks-examples，目的是爲了讓你們更爲方便地學習和使用.NET Core、最新的前端開發框架Angular，以及Apworks開發框架。從此會有愈來愈多的案例代碼加入到這個系列中，以更好地展現Apworks框架在基於.NET企業應用系統開發中的應用。今天，我向你們介紹這套代碼的第一個案例應用：Task List。

Task List業務邏輯比較簡單，就是幫助用戶維護一張任務列表（TO-DO List），用戶能夠根據目前的狀況來勾選已經完成的任務，以瞭解還有哪些事情沒有作完。在AngularJS以前的版本中，官方就推出過相似的案例。今天，我使用最新的技術從新實現了這個案例，它有着全新的用戶體驗：

所使用的技術

咱們攻城獅最關心的就是一個案例所使用的技術。這裏大體羅列一下，以便你們可以根據本身的實際狀況酌情考慮是否可以從本案例中學到一些知識。

• 前端
• Angular 4
• Bootstrap 4
• TypeScript 2.3
• Angular Notifications
• 後端
• ASP.NET Core Web API
• Apworks框架
• MongoDB的倉儲實現
• Hypertext Application Language（HAL）以及由HAL原生支持的服務端分頁（以前有朋友問，使用HAL有什麼好處。這裏就體現出來了：分頁信息和分頁連接直接包含在服務返回中，客戶端只須要簡單的綁定就好了）
• 運行環境
• Docker
• Docker Compose

若是你對上面的任何一項感興趣，你均可如下載瞭解本案例。不管是前端仍是後端，本案例的實現都是很是簡單的，可以讓初學者很快速地入門。

運行Task List案例

Apworks Examples項目提供了三種方式運行Task List案例：從Docker運行，從本地運行，以及在開發環境中運行。

從Docker運行

從Docker運行Task List案例是很是容易的，你只須要確保你的電腦安裝了Docker。而後，使用如下步驟運行Task List：

1. 啓動MongoDB容器：
   

   sudo docker run -d -P --name mongo mongo

2. 啓動Task List容器：
   

   sudo docker run -d -p 5000:5000 --link mongo daxnet/apworks-examples-tasklist

3. 打開瀏覽器，在地址欄輸入：http://<服務器地址>:5000，你就能看到上面的Task List應用。試着新增一些任務項目看是否可以正確地被添加到Task List中

從本地運行

若是你但願本身下載源代碼，並在本身的環境中直接運行Task List，首先須要確保你的電腦知足如下條件，或者安裝瞭如下軟件：

• git
• Docker
• Docker Compose（若是你使用了Windows 10，並安裝了Docker for Windows，則無需額外安裝Docker Compose）
• Powershell for Linux（若是你使用的是Windows 10，則無需安裝）
• .NET Core SDK
• nodejs（推薦使用LTS版本）
• Angular CLI

而後，使用如下步驟運行Task List：

1. 克隆代碼庫
   

   git clone https://github.com/daxnet/apworks-examples

2. 使用cd命令切換到src/TaskList目錄
3. 使用下面的命令建立可發佈編譯：
   

   powershell -F publish-all.ps1

4. 使用下面的命令啓動應用程序：
   

   sudo docker-compose up

5. 打開瀏覽器，在地址欄輸入：http://<服務器地址>:5000，你就能看到上面的Task List應用。試着新增一些任務項目看是否可以正確地被添加到Task List中

在開發環境中運行

若是你但願使用開發工具打開、編譯並運行本案例，你須要安裝：

• git
• Visual Studio 2017
• Visual Studio Code
• MongoDB
• nodejs（推薦使用LTS版本）
• Angular CLI

而後，執行下面的步驟以在開發環境中運行本案例：

1. 啓動MongoDB
2. 在Visual Studio 2017中打開Apworks.Examples.sln
3. 按F5執行Apworks.Examples.TaskList
4. 在命令提示符下，使用cd命令進入src/TaskList/client目錄，而後使用如下命令更新依賴庫：
   

   npm install

5. 在client目錄下，使用如下命令啓動Task List應用程序：
   

   ng serve

6. 打開瀏覽器，在地址欄輸入：http://localhost:4200，你就能看到上面的Task List應用。試着新增一些任務項目看是否可以正確地被添加到Task List中

總結

怎麼樣？是否是很簡單？從此還將會有更多的案例加入到這個項目中，下一步將添加基於Entity Framework Core的倉儲實現案例，屆時我還會使用Apworks框架重寫我以前已經實現的we-text微服務，更爲完善地演示微服務、CQRS、雲架構在企業系統設計中的應用。

參考

• 《在ASP.NET Core中使用Apworks快速開發數據服務》
• 《基於.NET Core的Hypertext Application Language（HAL）開發庫》
• 《在ASP.NET Core中使用Apworks開發數據服務：對HAL的支持》