不同方法 - 使用 ASP.NET MVC 和 AngularJS（附带 TypeScript）构建迷你 SPA
5.00/5 (2投票s)
使用 ASP.NET MVC 和 AngularJS（附带 TypeScript）构建迷你 SPA
引言
在本文中，我们将讨论一种模块化的方式来开发 AngularJS 单页应用程序，以提高可维护性。
示例代码演示了注册和登录功能，您可以根据需要进行改进。它可以在 Github 上找到，链接为 此链接。
背景
为了理解代码，您应该了解以下技术：
- AngularJs 1.5 – 用于应用程序的业务逻辑
- ASP.NET MVC 5 – 用作 AngularJS 代码的包装器
- TypeScript 2.0 – 用于在 AngularJS 代码中轻松实现 OOP
- ASP.NET Web Api 2 & Oauth – 用于应用程序的服务器端业务逻辑
- Mongodb – 用于存储数据（可选）
- 存储库模式 – 用于将数据访问层与应用程序解耦（可选）
- MEF（可选）
本文要点
- 将 AngularJs 开发为迷你 SPA
- 使用 AntiforgeryToken 和 基于令牌的身份验证和授权 来保护 Web API 2
- 在 AngularJS 中使用 TypeScript 来实现 OOP
- 使用 ASP.NET MVC 来 降低大型应用程序的复杂性
- 以 模块化 风格开发 SPA
传统 SPA 方法的缺点
- 大型应用程序难以维护，因为所有内容都直接添加到单个页面/文件中
- 单个路由文件变得越来越大，难以维护
- 单个主页存储所有应用程序的引用，如 CSS 和 JS 文件。
- 理解和维护现有应用程序变得非常困难，更改可能导致更多错误
- 无法使用 ASP.NET MVC AREA 这样的方法来分离功能和代码
- 混合 AngularJS 代码和 ASP.NET MVC 代码，这不是一个好主意（这种方法非常不灵活，有时为 AngularJS 代码编写单元测试用例会非常棘手。）
- 无法利用 OOP
我的方法的优点
- 与其开发一个大型 SPA，不如将功能分解成多个迷你 SPA
- 使用 TypeScript 在 AngularJS 代码中实现 OOP
- 为每个迷你 SPA 设置单独的路由文件
- 为每个迷你 SPA 设置单独的
ng-app模块，并且该模块可以在其他模块中重用 - 为每个迷你 SPA 设置单独的主页，该主页可以只包含所需的引用文件
- 一个模块可以在一个迷你 SPA 中用作应用程序模块/根模块，也可以在另一个迷你 SPA 中用作普通模块
- 使用 ASP.NET MVC 作为包装器，仅用于加载所需的引用、打包引用文件以及为迷你 SPA 的主页。
- 可以在 UI 项目中执行基本身份验证，因为 ASP.NET MVC 是包装器，并且每个功能（迷你 SPA）都可以受到保护。
假设我们正在开发一个约会网站，具有以下功能：
- 欢迎页面
- 注册
- 登录
- 外部登录
- 个人资料搜索
- 高级搜索
- 个人资料
- 通过卡/PayPal 付款
与其将这些功能视为一个应用程序，不如将上述功能分解成三个迷你 SPA，如下所示：
- HomeSpa
- 欢迎页面
- 注册
- 登录
- 外部登录
- SearchProfileSpa
- 个人资料搜索
- 高级搜索
- 个人资料
- PaymentSpa
- 通过卡付款
- 通过 PayPal 付款
** 示例代码中仅实现了前两个功能，可在 GitHub 上找到，在此处。
示例代码说明
示例代码解决方案具有以下层：
- UI 文件夹 -
Sample.MVC.Angular.UI– 这是一个 AngularJS 项目，但包装在 ASP.NET MVC 中。 - ApplicationServices 文件夹 -
DatingSite.WebApi4– 这是一个 Web API 层，在 AngularJS 代码中被调用。 - DomainServices 文件夹 – 包含与业务层相关的项目，这些项目被 WebApi4 项目调用。
- MongoDbAccess – 包含与数据访问层相关的项目，这些项目被
Sample.DomainServices项目调用。
您可以只关注 UI 文件夹 - Sample.MVC.Angular.UI 项目。底层遵循存储库模式，您可以轻松地将这些层替换为您自己的业务和数据访问层。
下图（图 1）显示了 UI 项目中的迷你 SPA 文件夹结构
对于每个迷你 SPA，我们都有一个 MVC 控制器和一个视图页面，它们将扮演容器页的角色，类似于 ASP.NET MVC AREA，并将包含相关迷你 SPA 的所有引用文件。
所有 AngularJS 代码都放在 MiniSpas 文件夹下，并为每个迷你 SPA 创建一个子文件夹。
所有迷你 SPA 都是 AngularJS 模块，可以像其他模块一样被重用。
ModuleInitiator.js
当调用 MiniSpas.ModuleInitiator.GetModule() 方法时，此模块会自动创建或加载具有所需依赖项的模块。
_Layout.cshtml
该文件包含所有迷你 SPA 使用的文件引用。
并且特定于某个迷你 SPA 的引用将位于 index.cshtml 页面中，当请求迷你 SPA 时，该页面会被 MVC 控制器调用，如下所示：
迷你 SPA 结构
每个迷你 SPA 都有自己的路由和模块创建代码。代码分为两层 – 控制器和服务，如下所示：
就是这样
您需要仔细阅读代码以获得更好的理解。请告诉我您对该方法/应用程序架构的看法。