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

问题描述

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

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 Code，而不是Visual Studio Code).

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);
 }

注意:由于ng2应用不在mvc项目域中，因此您必须配置asp.net mvc后端以用于CORS或跨源HTTP请求.

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使此过程变得快捷而简单).仅使用一个剃刀视图和一个剃刀视图来服务您的网页.这是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屋！