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

问题描述

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

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).

我知道这里有一个类似的问题(

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. 使用 VS Code 完成ng的开发，并使用ng serve为应用提供服务. VS Code的开发经验很棒！
4. 当我们想将应用程序嵌入MVC视图时，我们首先使用ng build --prod将其构建为prod.这将在 dist 文件夹中创建捆绑包.
5. 在MVC应用中，我为每个SPA在 Scripts \ Frontend 下准备了一个文件夹

6. MVC项目中的 gulp任务负责将分发包从SPA的 dist 文件夹复制到 Scripts \ Frontend下的相应文件夹中.使用Task Runner，该任务绑定到Build 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.

在bundles配置中，我为样式创建了bundle，为脚本创建了bundle.由于prod软件包名称是由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屋！