二、ABP 框架
三、zero 模块
四、其他(中文翻译资源)
本篇是第一部分的第一篇。
第一部分分三篇
1-1 手把手引进门
1-2 进阶
1-3 杂项 (相关理论知识)
第一篇含两个步骤。
1-1-1 ASP.NET Core & Entity Framework Core 后端(内核)含两篇 ( 第一篇链接 第二篇链接)
1-1-2 ASP.NET MVC, Web API, EntityFramework & AngularJs 前端
现在进入正文
土牛语录:Halil ibrahim Kalkan, 26 Oct 2016
使用 AngularJs , ASP.NET MVC , Web API , EntityFramework 和 ASP.NET Boileplate 创建一个 N 层的,本地化的,良好架构的单页面 Web 应用。
样例程序的截图如上。
介绍
用模板创建应用
创建实体 entities
创建数据库上下文 DbContext
创建数据库迁移
定义仓储 repositories
实现仓储
创建应用服务
创建 Web API 服务
开发单页程序 SPA
本地化
单元测试
总结
文章更改历史
引用
版权所有
Angular 学习资料
在这篇文章中,我们会展示如何用以下工具从底层到顶层逐步的开发一个单页面 Web 应用程序(SPA)
ASP.NET Boilerplate [1] 是一个开源的应用程序框架,它把以上所有的框架和类库合并到一起,让我们可以轻松的开始开发我们的应用程序。这是一个最佳实践的基础框架,我们可以用它来开发应用程序。它天然的支持依赖注射 Dependency Injection ,领域模型设计 Domain Driven Design 和 分层架构 Layered Architecture 。样例应用程序夜实现了验证 Validation , 异常处理 exception handling , 本地化 localization 和 响应式设计 responsive design。
ASP.NET Boilerplate 会生成模板,模板绑定并配置好很多搭建企业级 web 应用最好的工具,这让我们在开始创建一个新应用程序时可以节约很多时间。
让我们从 aspnetboilerplate.com/Templates 开始生成模板创建我们的应用程序吧。
译者注:友情提示:上面的页面是旧版本的。新版本请参考 ASP.NET Core & Entity Framework Core第一篇链接
在上图中,我们选择 SPA (单页面程序)AngularJs 和 EntityFramework 。依然使用 SimpleTaskSystem 作为我们的项目名字。点击创建后会生成并下载我们的解决方案。
解决方案中有 5 个项目。 .core 项目是领域(业务)层, Application 项目是应用层, WebApi 项目实现 Web Api 控制器, Web 项目是展现层,最后 EntityFramework 项目是 EntityFramework 数据库的实现,是基础设施层。
友情提示:如果你下载本文的样例解决方案(译者注:文章开头的样例下载链接),你会看到解决方案有 7 个项目。那是因为我们将样例修改为支持 NHibernate 和 Durandal 。如果你对 NHibernate 或者 Durandal 不感兴趣,请忽略。
(译者注:如果从官网下载,.Net Core 必须选择带 zero 模块才能下载 Angular 版本,不选择 zero 模块必须使用 .Net MVC 5.X,如图)
我们创建一个简单的应用服务,这个服务创建任务并把任务指派给责任人。所以,我们需要任务 Task 和责任人 People 实体。
任务 Task 实体定义很简单,包含任务的描述 Description , 创建时间 CreationTime ,状态 State 。还有一个可选的责任人 Person (责任人 AssignedPerson)引用:
代码如下
View Code
责任人 Person 实体仅仅定义了责任人的名字 :
代码如下
View Code
ASP.NET Bolierplate 提供预定了 Id 属性的 Entity 类。我们的实体从 Entity 类继承。任务 Task 类从 Entity
由于实体属于领域层 / 业务层,所以我们在 Core 项目下定义实体。
总所周知,EntityFramework 通过 DbContext 类与数据库连接。我们首先来定义 DbContext 。 ASP.NET Boilerplate 模版已经为我们创建了 DbContext 模板。我们只需要把实体 Task 和 Person 的 IDbSets 加上去就可以。这是我们的 DbContext 类:
代码如下
View Code
它将会使用 web.config 中的默认 Default 连接字符串。 它定义如下:
代码如下
View Code
我们使用 EntityFramework 的 代码优先模式 Code First 迁移来创建和维护数据库结构。 ASP.NET Boilerplate 模版支持默认迁移并使用配置 Configuration 类。
代码如下
View Code
在 Seed 方法中,我们加入 4 个人作为初始数据。 然后,我们开始创建 初始迁移 initial migration 。 我们打开程序包管理控制台 Package Manager Console 并输入以下命令,如图:
(译者注:如果这部分有问题,请参照 ASP.NET Core MVC 的第一篇,默认项目必须选 EntityFramework 项目)
输入命令 Add-Migration "InitialCreate" 创建一个名为 InitialCreate 的类。
代码如下
View Code
我们已经完成了创建数据库所必需的类了,但是我们还没创建数据库。创建数据库必需输入以下的命令:
代码如下
View Code
(译者注:命令在刚才的程序包管理控制台里输入。即输入 Add-Migration 的地方)
这个命令执行迁移,创建数据库并填充初始数据。
当我们修改实体类后,我们可以很容易的创建新的迁移类,输入 Add-Migration 命令然后再输入 Update-Database 命令来更新数据库。 如果对数据库迁移感兴趣的,可以参考 entity framework 文档。
在领域设计模式中,仓储是用于实现数据库操作的指定代码。 ASP.NETBoilerplate 定义了范型的 IRepository 接口, 它为每个实体创建了自动化的仓储。 IRepository 定义了很多公用方法,比如 select ,insert ,update , delete 等等,如图:
在我们需要的时候我们可以扩展这些仓储 。 我们来扩展它并创建一个任务 Task 仓储。依据接口实现分离约定,我们首先声明仓储的借口, 任务 Task 的仓储接口如下:
代码如下
View Code
代码拓展了 ASP.NETBoilerplate 的范型 IRepository 接口。所以, ITaskRepository 默认就包含所有这些方法的定义。它只需要编码自定义的方法 GetAllWithPeople(...).
至于责任人 Person 仓储就无需再创建了,因为默认的方法我们就够用了。 ASP.NET boilerplate 无需创建仓储类,通过反射范型仓储就可以用了。我们将在创建应用服务章节的任务应用服务 TaskAppService 类进行展示。
仓储接口是领域层 / 应用层的一部分,所以我们在 Core 项目下进行定义。
我们来实现刚才定义的 ITaskRepository 接口。我们将在 EntityFramework 项目实现仓储类。 这样,领域层将完全独立于基础设施层 EntityFramework 。
当我们创建模版时, ASP.NET Boilerplate 在我们的项目中自动创建了仓储范型类 : SimpleTaskSystemRepositoryBase 。 创建这个基类是一种最佳实践的做法,我们可以在以后为我们的仓储类添加一些公用的方法。我们可以在代码里看到这个基类的定义。我们实现的 TaskRepository 就从这个基类继承。
代码如下
View Code
任务仓储 TaskRepository 继承于 SimpleTaskSystemRepositoryBase 并实现了 ITaskRepository 接口。
GetAllWithPeople 是我们自定义的方法,该方法获取任务,并附带任务的责任人(预先绑定),该任务可通过设定条件进行过滤。我们可以在仓储里自由的使用数据库和数据库上下文 Context ( EF 的 DbContext )对象。ASP.NET Boilerplate 为我们管理数据库连接,事务,创建和销毁数据库上下文 DbContext (详情参见 documentation)
应用服务通过分层方法把展示层和领域层分开。 我们在项目的应用程序集里定义了应用服务。首先,我们为任务应用服务定义接口:
代码如下
View Code
(译者注:在. net core 系列里, input 和 output 都已经替换为 ResultDto 了。 建议官网下载最新的版本)
接口 ITaskAppService 拓展了 IApplicationService 。 ASP.NET Boilerplate 自动为这个类提供了一些特性 (比如依赖注入 dependency injection 和 验证 validation )。现在,让我们来实现 ITaskAppService 接口
代码如下
View Code
任务应用服务 TaskAppService 使用仓储来操作数据库。它通过构造函数注入模式从构造函数获得引用。 ASP.NET Boilerplate 天然实现依赖注入,所以我们可以自由的使用构造函数注入和属性注入(更多依赖注入详情请参照 ASP.NET Boilerplate documentation 文档)
友情提示,我们通过 反射 IRepository
应用服务方法使用数据传输对象 Data Transfer Objects (DTOs)。 这是最佳实践的一种。我们强烈推荐使用这种方法。如果你在将实体暴露给展示层这个问题上有自己的处理方式的话,请按你自己的方式来,无需一定使用 DTO。
在 GetTasks 方法里, 我们使用 GetAllWithPeople 方法。它会返回一个 LIst
在 CreateTask 方法里, 我们简单的创建了一个新的任务并使用 IRepository 的插入方法将它插入了数据库。
ASP.NET Boilerplate 的 ApplicationService 类有一些方法可以让我们更容易的开发应用服务。例如,它定义了记录日志的 Logger 属性。所以,由于我们的 TaskAppService 是从 ApplicationService 继承的,我们可以直接使用 Logger 属性。是否从这个类继承是可选的,但必需实现 IApplicationService (友情提示,ITaskAppService 拓展了 IApplicationService ,由于这个类实现了 ITaskAppService 也就实现了 IApplicationService )
ASP.NET Boilerplate 自动验证应用服务方法的输入参数。 CreateTask 方法将 CreateTaskInput 作为输入参数
代码如下
View Code
在这,描述 Description 被标记为必需的 Required 。 你可以使用更多的数据注释属性,请参考 Data Annotation attributes 。 如果你想做一些定制验证,你可以实现 ICustomValidate , 就像我在 UpdateTaskInput 里实现的
代码如下
View Code
AddValidationErrors 方法是你编写你自己的定制验证代码的地方。
友情提示,我们不处理任何异常。 ASP.NET Boilerplate 自动处理异常,日志并返回一个恰当的错误信息给客户端。同理,在客户端,自动的处理这些错误信息并展示给客户。实际上,这对 ASP.NET MVC 和 Web API 控制器操作来说是合理的。 我们将使用 Web API 来暴露任务管理服务 TaskAppService , 我们无需处理异常。 细节请参考 exception handling 文档。
我们将我们的应用服务暴露给远程客户端。这样,我们的 Angularjs 应用程序可以使用 AJAX 轻松的调用这些服务方法。
ASP.NET Boilerplate 提供了自动化方法将我们的应用服务方法暴露为 ASP.NET Web API 。我们使用 DynamicApiControllerBuilder
代码如下
View Code
在这个例子里, ASP.NET Boilerplate 在应用层程序集里查找所有继承了 IApplicationService 接口的接口,然后为每个应用服务类创建一个 web api 控制器。这是精细控制的替代语法。我们来看看怎么使用 AJAX 调用这些服务。
我们来实现一个单页面(SPA) Web 应用来作为我们项目的用户界面。 AngularJS (Google 出品)是 SPA 框架最有用的一个(也许是最好的一个)。
ASP.NET Boilerplate 提供一个模版,使我们可以轻松的开始使用 AngularJs 。 模版有可以平滑切换的两个页面(主页和关于页)。 使用 Twitter 的 Bootstrap 作为 html/CSS 框架。(所以,这是基于响应模式的。)。 当然,ASP.NET Boilerplate 的本地化系统可以让我们自由切换英语和土耳其语 (我们也可以很容易的添加其他语言或者删除掉)
我们首先修改模版的路由。 ASP.NET Boilerplate 模版使用 AngularUI-Router 路由器。这是 AngularJs 的标准路由器 de-facto 。 它是基于状态的路由模式。我们将有两个视图: 任务列表 task list 和新任务 new task 。 所以, 我们需要修改 app.js 中定义的路由。
代码如下
View Code
app.js 是主要的 javascript 文件, 它配置和启动我们的 SPA 。友情提示, 我们使用 cshtml 文件作为视图。通常,在 AngularJs 中,我们使用 html 文件作为视图。 ASP.NET Boilerplate 让我们可以使用 cshtml 文件。所以我们可以使用 razor 引擎来生成 HTML 。
ASP.NET Boilerplate 基础架构支持在应用程序里创建和展示菜单 menus ,而且这很简单。你可以使用 C# 定义菜单,使用 C# 和 javascript 来使用菜单。请查看 SimpleTaskSystemNavigationProvide 类的代码,这里我们创建了菜单,然后请查看 header.js/header.cshtml 的代码, 这里我们展示了如何使用 angular 来展示菜单。
首先,我们为 任务列表 task list 视图创建一个 Angular 控制器 controller
代码如下
View Code
我们将控制器 controller 命名为'sts.views.task.list' 。这么命名是我的习惯(方便拓展或重构代码),但你可以简单的命名为'ListController' 。 AngularJs 一样可以使用依赖注入。 我们在这反射 '$scope' 和'abp.services.tasksystem.task' 。 第一个是 Angular 的 scope 变量,第二个是自动生成的 ITaskAppService (我们在创建 Web API 服务章节创建了这个接口) 的 javascript 服务代理 。
ASP.NET Boilerplate 的基础架构支持在服务端和客户端都使用相同的本地化 localization 文本 (详情请参照 localization 文档)
vm.tasks 是即将在视图里展示的任务列表。 vm.refreshTasks 方法调用 taskService 获取任务并填充到队列里。当 selectedTaskState 改变的时候(使用 $scope.$watch 监控)就会调用 vm.refreshTasks 方法。
就像你所看到的。调用应用服务方法是如此的容易和直接!这是 ASP.NET Boilerplate 的特性之一。它生成 Web API 层和与 Web API 层通讯的 Javascript 代理层。所以,我们调用应用服务方法就想调用 javascript 方法一样简单。这是与 AngularJs 的完整集成 (通过使用 Angular 的 $http 服务)。
让我们看下任务列表的视图代码。
代码如下
View Code
ng-controller 特性(参见第一行)将视图和控制器绑在了一起。 @L("TaskList") 用于将 "任务列表 task list" 进行本地化 (在服务端对 HTML 进行渲染)。这是 cshtml 文件可以做到的。
ng-model 将下拉框和 javascript 变量绑定在了一起。当变量改变时,下拉框就会更新。当下拉框改变了,变量也就更新了。这是 AngularJs 的双向绑定。
ng-repeat 是 Angular 中的另一个 "指令",用于传送相同的 HTML 给队列里的每个值。当队列改变时(比如添加了一个项目),它会自动反射到视图里。这是 AngularJs 另一个很强大的特性。
友情提示,当你添加一个 javascript 文件时(例如,为 '任务列表'控制器),你应该把它加到你的页面上。你可以在模版里的 Home\Index.cshtml 里添加它。
ASP.NET Boilerplate 拥有一个灵活且强大的本地化系统。你可以 XML 文件或资源文件作为本地化源文件。你也可以自定义本地化源文件。详情请参加 documentation 文档。在这个样例应用程序里,我们使用 XML 文件(路径是 web 应用程序的本地化文件夹里 Localization):
代码如下
View Code
ASP.NET Boilerplate 的设计是可测试的。我们编写了一篇文章来展示 ABP 基本项目的单元测试和集成测试。文章请参见 Unit testing in C# using xUnit, Entity Framework, Effort and ASP.NET Boilerplate
在这片文章里,我们展示了如何开发一个 N 层单页面的 SPA 基于响应式用户界面的 ASP.NET MVC web 应用程序。我们使用 ASP.NET Boilerplate 作为基础架构,因为它是基于最佳实践的,我们不止很容易就可以开发应用程序,而且相当的节约时间。更多信息请参考以下链接:
[1] ABP.NET Boilerplate 官网 : http://www.aspnetboilerplate.com
该文章和其中的任何源代码和文件的版权均归 The Code Project Open License (CPOL) 所有
此部分信息为译者学习中使用的资料,与本文及作者无关。请按需使用。
Angular 英文官网 : https://angular.io/
Angular 中文官网 :https://angular.cn/ 中文官网在大版本上与英文官网同步,小版本上会落后一些。
阿里的 Angular 组件 NG-ZORRO:https://ng.ant.design/#/docs/angular/introduce 分为 NG5 和 NG4 两个版本
百度的 Echarts 数据可视化组件 : http://echarts.baidu.com/
书籍推荐看官方的英文或中文文档:
推荐看 ng-book 最新版本,英文的 https://www.ng-book.com/2/
中文的只有 ng-book2 的翻译版 《Angular 权威教程》
最后推荐看 雪狼的 《AngularJS 深度剖析与最佳实践》这本书写的是 Angular 1.0 ,感兴趣的可以重温一下
群和博客请参考
来源: https://www.cnblogs.com/yabu007/p/8134792.html