.NET Core 和 Angular 2 工作流程

Question

我想知道 正确的 归档结构是什么，用于使用 Angular 设置 .NET Core 1.0.0 MVC 应用程序 2. 我浏览了各种教程和讲座，但他们似乎都有不同的方法将 angular 2 实现到 .NET 中。此外，将 angular 2 实施到 .NET MVC 应用程序中的最佳实践是什么（a.k.a。我什么时候应该使用 angular SPA 实践与使用 POST/GET 和 .NET ) 以及我应该如何正确设置工作流程？谢谢。

Answer 1

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

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

否则不要将两者混用（除非你喜欢 Angular 通用，其中你的 ng2 应用程序在服务器上预呈现，但这是一个特殊主题）。

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

注意：我知道您可以在 Visual Studio 代码的上下文中使用 .Net Core，我已经尝试过了，但仍然很烦人。最好让 angular-cli 运行展示所有前端的东西。

现在你的 ng2 应用程序当然可能想要调用 "the server"，即进行 http 调用等，如下所示：

    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/ 之类的地方，它指的是 asp.net Web Api 我正在运行同时参与 Visual Studio 项目。所以后端看起来像这样：

 // 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 项目域中。

当您想要将应用部署到生产环境时，您可以使用 angular-cli 命令来捆绑和优化您的 ng2 应用 ("ng build -prod")。然后将 "prod" 文件夹中的所有资源复制到您的 asp.net 项目中（gulp 使此过程变得又快又简单）。仅使用一个剃刀视图和一个剃刀视图来为您的网页提供服务。这是此类视图的示例，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 核心 "server" 在一个单独的项目中。

更新：忘了说，当你构建生产环境，在一个项目中有效统一前后端时，你需要记得将 apiUrl 更新为“/”，表示后端调用是在当前域内（即没有 CORS）

.NET Core 和 Angular 2 工作流程

.NET Core and Angular 2 Work Flow

typescript

angular

asp.net-core-mvc

asp.net-core-1.0