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

Question

我正在启动我自己的 Angular Web 应用程序。我有 C# 和 Angular 编码经验，但我从未需要建立自己的项目/解决方案。在这种情况下，我想设置一个 ASP.NET Web API，它将与 JSON 中的 Angular SPA 前端进行通信(尽管它对前端来说应该是不可知的，但任何使用 JSON 的应用程序都应该能够与其进行通信) )。

此外，我听说过有关 grunt 的好消息，因此我想将其合并到项目中(至少编译 LESS 并缩小并组合我的 Angular 文件)。

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

我只是有点困惑如何继续这里。我应该将我的 Angular 拆分为同一解决方案中的单独项目吗？如何包含 grunt？ 如何在 Visual Studio 的上下文中使用 grunt 将我的 Angular 文件包含在我的 index.html 文件中？

该项目带有一个 Scripts 文件夹和一个 Views 文件夹。我知道最好按功能构建 Angular 文件，以便将 Controller 和 View 放置在一起。我应该将我的 View 包含在脚本文件夹中吗？这对我的构建过程有何影响？

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

Answer 1

让我们一步一步来:

使用 Web Api 和 Angular JS 的 Visual Studio 解决方案

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

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

• 内容
• Controller
• 型号
• 脚本(包含 app/文件夹和 vendor 脚本，如 Angular、jquery 等)
• 观看次数

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

使用 Grunt/Gulp

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

要使用这些任务运行程序，您可以使用 Project Build Events 。在项目构建事件中，您可以运行 Grant/Gulp 任务，这将为您带来所有魔力。

还有一个名为 Task Runner 的 Visual Studio 扩展。 。此扩展允许您通过添加任务运行程序资源管理器窗口来执行 Visual Studio 内的任何 Grunt/Gulp 任务或目标。

使用 Task Runner 在 Visual Studio 项目中使用 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 文件中的构建 block 以替换对非优化脚本或样式表的引用。
• gulp-less - Gulp 的数量较少。
• gulp-uglify - 使用 UglifyJS 缩小文件。