如何在 MVC 5 中使用 Visual Studio 2015 设置 angular-cli? [英] How to set up angular-cli with Visual Studio 2015 in MVC 5?

问题描述

我正在寻找一些关于如何在 MVC 5(非核心)中设置和集成 angular-cli (webpack) 与 Visual Studio 2015 的最佳实践和说明.

I'm looking for some best practices and instructions on how to set up and integrate angular-cli (webpack) with Visual Studio 2015 in MVC 5 (not Core).

我意识到这里有一个类似的问题(如何在 Visual Studio 2015 中使用带有 ASP.NET Core 的 Angular-Cli 设置 asp.net angular 2 项目?)，但那是为了仅 Asp.net 核心.由于服务器技术问题，我的项目还无法转移到 Core.

I realize there's a similar question asked here (how to set up asp.net angular 2 project using Angular-Cli with ASP.NET Core in Visual Studio 2015?), but that was for Asp.net Core only. My project could not move over to Core yet due to server technical issues.

推荐答案

我集成 Angular/CLI 和 MVC 的方法:这里的想法是将前端开发体验与 MVC 部分分开，这样您就不必处理任何 Visual Studio BS，并享受 Angular CLI 和 VS Code 的好处.

My approach to integrating Angular/CLI and MVC: The idea here is to separate the front end development experience from the MVC part, so you don’t have to deal with any of the Visual Studio BS, and enjoy the benefits of the Angular CLI and VS Code.

我的应用程序是一个混合应用程序 - 大多数页面和主导航是经典的 MVC，但有些视图实际上是单页面应用程序，其中 NG 应用程序嵌入到现有视图中.

My app is a hybrid app - most pages and main navigation is classic MVC, but some views are in fact single page applications, where the NG app is embedded into an existing view.

1. 我在解决方案中创建了一个新项目来存储 SPA.(您可以从解决方案构建中排除此项目)
2. 在新项目中，我为每个 SPA 创建了一个目录.这些文件夹中的每一个都是一个标准的 CLI 项目(使用 ng new 创建)
3. ng 内容的开发使用 VS Code 完成，使用 ng serve 为应用提供服务.VS Code 的开发体验非常棒！
4. 当我们想要将应用嵌入到 MVC 视图中时，我们首先使用 ng build --prod 为 prod 构建它.这会在 dist 文件夹中创建包.
5. 在 MVC 应用程序中，我在 Scripts\Frontend 下为每个 SPA 准备了一个文件夹

6. MVC 项目中的 gulp 任务 负责将包从 SPA 的 dist 文件夹复制到 Scripts\Frontend 下的相应文件夹中.使用 Task Runner，该任务绑定到 Before Build，因此每当构建应用程序时它都会自动执行.重要的 gulp 命令是:

1. I created a new project in the solution to store the SPAs. (You can exclude this project from the solution build)
2. In the new project, I created a directory for each SPA. Each one of these folders is a standard CLI project (created using ng new)
3. Development of the ng stuff is done with VS Code, serving the app using ng serve. The development experience with VS Code is awesome!
4. When we want to embed the app into the MVC view, we first build it for prod using ng build --prod. This creates the bundles in the dist folder.
5. In the MVC app, I prepared a folder under Scripts\Frontend for each SPA

6. A gulp task in the MVC project is responsible for copying the bundles from the SPAs' dist folders into the appropriate folders under Scripts\Frontend. Using Task Runner, the task was bound to to Before Build, so it is automatically executed whenever the app is built. The important gulp command is:

gulp.src('../FrontEndProj/spa1/dist/*bundle.*')
    .pipe(gulp.dest('Scripts/Frontend/spa1'));

当然，您需要删除现有文件等.

of course, you need to delete the existing files etc.

在包配置中，我为样式创建了一个包，为脚本创建了一个包.由于产品包名称是由 CLI 使用哈希生成的，因此我使用通配符:

In bundles config, I've created a bundle for the styles and a bundle for the scripts. Since prod bundle names are generated with hash by the CLI, I use wildcards:

bundles.add(new script("~/Scripts/spa1/js")
  .IncludeDirectory("~/Scripts/Frontend/spa1", inline.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "polyfills.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "vendor.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "main.*"));

(请注意，将文件添加到包中的顺序很重要！)

(Note that the order you add the files to the bundle is important!)

bundles.add(
  new StyleBundle("/Scripts/spa1.css")
    .IncludeDirectory("~/Scripts/Frontend/spa1", "*.css")

在您的视图中，添加 ng app 指令并使用捆绑包:

In your view, add the ng app directive and use the bundles:

@section head {
  @Styles.Render("~Scripts/spa1/css")
}

<app-root>Loading...</app-root>

@Scripts.Render("~/Scripts/spa1/js")

这篇关于如何在 MVC 5 中使用 Visual Studio 2015 设置 angular-cli?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！