带有 ASP.NET Web API 后端的 AngularJS SPA答案

【问题标题】：AngularJS SPA with ASP.NET Web API back-end带有 ASP.NET Web API 后端的 AngularJS SPA
【发布时间】：2014-10-08 20:44:50
【问题描述】：

我是 AngularJS 的新手，需要一些关于如何使用 Web API 为内部订单输入系统构建 SPA 的建议（SEO 不是问题）。我想以一种干净、结构良好的方式进行设置，以实现高效的开发、调试和部署。

这是我打算做的：

不使用 MVC / razor 视图（将所有路由和渲染留给 Angular）
创建两个单独的 Visual Studio (2013) 解决方案：一个仅用于 AngularJS SPA 部分，一个用于 Web API 部分（用于向 SPA 提供所有数据）。

作为替代方案，我想我可以为整个站点（SPA 和 WebAPI）使用一个 Visual Studio 解决方案，然后使用 razor 提供 html 文件（或者弄清楚如何禁用默认的 MVC 管道并提供直接的 HTML相反，以避免 MVC 开销）。另外，我是否必须将 SPA 和 WebAPI 放在同一个项目中才能轻松使用 Visual Studio 进行调试？

或者也许有更好的方法？

我们将不胜感激有关最佳做法/良好方法的建议。

【问题讨论】：

遵循 google 推荐的 Angular 应用程序结构最佳实践：docs.google.com/document/d/…。请务必使用 MVC/razor 视图进行初始页面加载，并使用 Web API 进行其他所有操作。保持控制器、脚本、资源按功能区域组织，而不是在结构上分开（根据谷歌指南）。请务必使用 VS2013 捆绑和缩小支持。
务必利用 MVC 控制器操作来管理任何大型站点的多个 SPA。这样做有很多好处（利用 ASP.NET 安全性的最佳实践）
可以使用 MVC 操作/剃刀视图，但主要用于初始页面加载，有时用于重定向到同一站点中的另一个 SPA。
你在寻找 Angularjs 和 WebAPI 吗？
@pixelbits 谢谢 - 很好的参考和建议！所以听起来我应该把 AngularJS SPA 和 WebAPI 不仅放在同一个 Visual Studio 解决方案中，而且放在同一个项目中（当然，对于存储库、模型、业务逻辑等使用不同的项目）。对此有什么想法吗？

标签： asp.net-mvc angularjs asp.net-web-api

【解决方案1】：

我们在同一个解决方案下创建了两个不同的项目，第一个是空的 Web 应用程序，下一个是类库。

1) Web 应用项目由 Angular JS 和其他客户端组件组成。

2) 类库由 Web api 控制器和相关组件如过滤器和其他细节组成。

我们在类库项目中有一个引导类，它为我们引导 webapi 和容器。也使得Web api的测试变得容易

   public class Bootstrap
   {
        public void ConfigureRoute(HttpConfiguration httpConfiguration)
        {
        }

        public BootStrapApplication ConfigureContainer()
        {
        }
   }

我们从 app_start 中的 global.asax 调用 BootStrap 应用程序类和方法。

对于 angularjs 上的应用程序结构，我发现 John papa 指南高效 https://github.com/johnpapa/angularjs-styleguide

希望对你有帮助

【讨论】：