Question

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

Answer 1

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

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

否则不要混淆两者（除非您进入Angular Universal，其中您的ng2应用程序已预先在服务器上呈现，但这是一个特殊主题。）

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

注意：我知道你可以在Visual Studio Code的上下文中使用.Net Core，我已经尝试过了，但它仍然太烦人了。最好让angular-cli为所有前端游戏运行节目。

当然，你的ng2应用程序可能会想要调用“服务器”，即进行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项目视觉工作室。所以后端看起来像这样：

 // 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环境中，我仍然建议您设置开发工作流程，使您的角度应用程序位于一个项目中，而.net核心“服务器”位于单独的项目中。

更新：我忘了提到当你为生产构建，并在一个项目中有效地统一前端和后端时，你需要记住将 apiUrl 更新为“/”，表明后端调用在当前域（即没有CORS）

.NET Core和Angular 2工作流程

1 个答案: