.NET Core 和 Angular 2 工作流程 [英] .NET Core and Angular 2 Work Flow

问题描述

我想知道 正确 文件结构是什么，用于使用 Angular 2 设置 .NET Core 1.0.0 MVC 应用程序.我浏览了各种教程和讲座，但它们似乎都有不同的方式将 Angular 2 实现到 .NET 中.此外，在 .NET MVC 应用程序中实现 Angular 2 的最佳实践是什么(也就是我应该何时使用 Angular SPA 实践与使用 .NET 的 POST/GET)以及我应该如何正确设置工作流程?谢谢.

I am wondering what the correct filing structure is for setting up a .NET Core 1.0.0 MVC application with Angular 2. I have browsed various tutorials and lectures but they all seem to have different ways of implementing angular 2 into .NET. Also, what are the best practices for implementing angular 2 into a .NET MVC app (a.k.a. when should I use angular SPA practices vs. using POST/GET with .NET) and how should I correctly setup the work flow? Thank you.

推荐答案

我一直将 asp.net 与 Angular 2 结合使用.我不知道是否存在使用 Angular 2 设置 .NET Core 1.0.0 MVC 应用程序的正确"方法.但我开发了一种基于以下原则的方法:

I use asp.net in conjunction with Angular 2 all the time. I don't know if there yet exists a "correct" method to setting up a .NET Core 1.0.0 MVC application with Angular 2. But I have developed an approach that builds on the following principle:

让asp.net处理后端，让Angular2处理前端.

Let asp.net handle the backend, and let Angular2 handle the front end.

否则不要将两者混用(除非您使用 Angular Universal，您的 ng2 应用程序在服务器上预渲染，但这是一个特殊主题).

Otherwise don't mix the two (unless you are into Angular Universal in which your ng2 app is pre-rendered on the server, but this is a special topic).

我将这些问题完全分开，以至于在开发时，我在 Visual Studio Code 的上下文中使用 angular-cli，即 Angular2 开发中没有一个字节的 .net环境.我发现使用 Visual Studio 构建 ng2 应用程序非常烦人.Angular 团队创建了 angular-cli 来解决与 Angular2 相关的许多开发和生产问题，让 angular-cli 负责所有前端工作流程更加容易.我还应该提到，使用 Visual Studio Code 非常愉快(我现在更喜欢它而不是 Visual Studio).

I separate these concerns so completely that, when I am developing, I use the angular-cli within the context of Visual Studio Code, i.e. not one byte of .net is present in the Angular2 development environment. I find building ng2 apps withing Visual Studio to be extremely annoying. The angular team has created the angular-cli to solve many development and production issues related to Angular2, that it is just easier to let the angular-cli be in charge for all front-end workflow. I should also mention that it is so enjoyable to work with Visual Studio Code (I now prefer it over Visual Studio).

注意:我知道您可以在 Visual Studio Code 的上下文中使用 .Net Core，并且我已经尝试过了，但它仍然太烦人而无法打扰.最好让 angular-cli 为所有前端的东西运行节目.

Note: I am aware that you can use .Net Core in the context of Visual Studio Code, and I have tried it, but it was still too annoying to bother with. Best to let angular-cli run the show for all front-end stuff.

当然，现在您的 ng2 应用程序可能想要调用服务器"，即进行 http 调用等，如下所示:

Now of course your ng2 app is probably going to want to make calls to "the server", i.e. make http calls etc such as the following:

    getMeSomeServerData(someVar: string): Promise < IGenericRestResponse > {
      let headers = new Headers();
      headers.append("Content-Type", "application/json");
      let url = this.apiUrl + "getMeSomeServerData";
      let post = this.http.post(url, JSON.stringify(someVar), {
        headers: headers
      }).map(response => response.json());
      return post.toPromise();
    }

这里要注意的关键是:

this.apiUrl

当我处于开发模式时，我会将此引用我的后端项目，该项目位于 http://localhost:1234/ 指的是我在 Visual Studio 中同时运行的一个 asp.net Web Api 项目.所以后端看起来像这样:

When I am in development mode I make this refer to my back-end project located at something like http://localhost:1234/ which refers to an asp.net Web Api project i am running concurrently in Visual Studio. So the back-end looks something like this:

 // this of course goes within a controller
 [HttpPost()]
 [Route("getMeSomeServerData")]
 public JsonNetResult GetMeSomeServerData(string someVar) {
   GenericRestResponse response = new GenericRestResponse();
   response.Error = false;
   // do somthing 
   return new JsonNetResult(response);
 }

注意:您必须为 CORS 或跨域 HTTP 请求配置您的 asp.net mvc 后端，因为您的 ng2 应用程序不在您的 mvc 项目域中.

Note: you have to configure your asp.net mvc backend for CORS or cross-origin HTTP requests since your ng2 app is not on your mvc project domain.

当您想要将应用程序部署到生产环境时，您可以使用 angular-cli 命令来捆绑和优化您的 ng2 应用程序(ng build -prod").然后将prod"文件夹中的所有资产复制到您的 asp.net 项目中(gulp 使这变得快速而简单).仅使用 ONE razor 视图和 1 razor 视图为您的网页提供服务.这是这样一个视图的示例，Home.cshtml:

When you want to deploy your app for production, then you use the the angular-cli command to bundle and optimize your ng2 app ("ng build -prod"). Then copy all the assets in the "prod" folder to your asp.net project (gulp makes this fast and easy). Use ONE razor view and one razor view only to serve your webpage. Here is an example of such a view, Home.cshtml:

<!DOCTYPE html>

<html>

<head>
  <base href="/">
   <script type="text/javascript" src="~/assets/js/styles.bundle.min.js"></script>

</head>

<body>
  <app>Loading...</app>
  <script type="text/javascript" src="~/assets/js/main.bundle.min.js"></script>
</body>

</html>

这就是我开发的工作流程，它非常适合我.我确实意识到这种方法不适用于任何使用 Mac 或 Linux 的人.在非 Windows 环境中，我仍然建议设置您的开发工作流程，以便您的 Angular 应用程序位于一个项目中，而 .net 核心服务器"位于一个单独的项目中.

And that's the workflow I have developed and it works great for me. I do realize that this approach will not work for anyone using Mac or Linux. In non-windows environments, I would still recommend setting up your development workflow such that your angular app is in one project, and the .net core "server" is in a separate project.

更新:忘了说，当你为生产构建，并且在一个项目中有效地统一了前端和后端，你需要记住将 apiUrl 更新为/"，表明后端调用在当前域(即没有 CORS)

UPDATE: I forgot to mention that when you build for production, and effectively unify the frontend and backend in one project, you need to remember to update the apiUrl to "/" indicating that the backend calls are within the current domain (i.e. no CORS)

这篇关于.NET Core 和 Angular 2 工作流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！