使用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的支持》