如何设置 ASP.NET API / AngularJS 项目

Posted 2023-04-12

【中文标题】如何设置 ASP.NET API / AngularJS 项目

【英文标题】：How to set up a ASP.NET API / AngularJS project

【发布时间】：2015-04-16 08:32:15

【问题描述】：

我正在启动我自己的 Angular Web 应用程序。我有使用 c# 和 angular 编码的经验，但我从来不需要设置自己的项目/解决方案。在这种情况下，我想设置一个 ASP.NET Web API，它将与 JSON 中的 Angular SPA 前端通信（尽管它应该与前端无关，但任何使用 JSON 的应用程序都应该能够与之通信)。

另外，我听说过关于 grunt 的好消息，所以我想将它合并到项目中（至少要编译 LESS 并缩小和合并我的 angular 文件）。

我正在使用 Visual Studio Professional 2013。我首先创建了一个 Web API 项目并下载了 WebEssentials 插件。

我只是有点困惑如何在此处继续。我应该在同一个解决方案中将我的角度拆分成一个单独的项目吗？我如何包含咕噜声？ 如何在 Visual Studio 的上下文中使用 grunt 将我的角度文件包含在我的 index.html 文件中？

该项目带有一个 Scripts 文件夹和一个 Views 文件夹。我知道最好按功能构造角度文件，以便将控制器和视图放在一起。我应该在脚本文件夹中包含我的视图吗？这对我的构建过程有何影响？

我意识到这些可能是非常幼稚的问题。请耐心等待，当涉及到这些类型的任务时，我是一个完全的初学者。我过去所做的基本上都是代码。

【参考方案1】：

让我们一步一步来：

带有 Web Api 和 Angular JS 的 Visual Studio 解决方案

您可以将 Web Api 和 Angular 代码存储在同一个解决方案和项目中。

在这种情况下，您可以像这样安排结构：

内容 控制器 型号 脚本（带有 app/ 文件夹和供应商脚本，如 angular、jquery 等） 观看次数

index.html 用于 Angular 应用程序，您可以将其放入 Scripts/app 文件夹。 Angular 的所有视图都可以放入 Scripts/app/views 文件夹中。

使用 Grunt/Gulp

Grunt/Gulp/Cake/Broccoli - 这些工具只是一个 javascript 任务运行程序，它允许您执行各种操作，例如将供应商脚本合并到一个文件中，将您的脚本压缩并合并到一个文件中，将您的 LESS 转换为CSS 等

要使用这些任务运行器，您可以使用Project Build Events。在项目构建事件中，您可以运行 Grant/Gulp 任务，这将为您完成所有魔法。

还有一个名为 Task Runner 的 Visual Studio 扩展。此扩展允许您通过添加 Task Runner Explorer 窗口在 Visual Studio 中执行任何 Grunt/Gulp 任务或目标。

在 Visual Studio 项目中通过 Task Runner 使用 Gulp 的示例

要通过 Task Runner 自动运行 Gulp 任务，您需要在 gulpfile.js 的开头添加一行

/// <vs AfterBuild='<here is a name of your Gulp task>' />

此行将强制您的任务在每次重建项目后运行。

有用信息

要获取有关在 ASP.NET 上使用 AngularJS 的应用程序的更多信息，您可以查看 John Papa 的视频：“Building Rich Apps with AngularJS on ASP.NET”

有用的 Gulp 模块：

gulp-useref

- 解析 HTML 文件中的构建块以替换对未优化脚本或样式表的引用。

gulp-less

- Gulp 少了。

gulp-uglify

- 使用 UglifyJS 缩小文件。