typescript – .NET Core和Angular 2工作流程

我想知道使用Angular 2设置.NET Core 1.0.0 MVC应用程序的正确归档结构是什么.我浏览了各种教程和讲座,但它们似乎都有不同的方法将angular 2实现到.NET中.另外,将角度2实现到.NET MVC应用程序中的最佳实践是什么(a.k.a.何时应该使用角度SPA实践而不是使用POST / GET与.NET)以及如何正确设置工作流程?谢谢.
最佳答案
我一直使用asp.net和Angular 2.我不知道是否存在使用Angular 2设置.NET Core 1.0.0 MVC应用程序的“正确”方法.但是我开发了一种基于以下原则的方法:

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

否则不要混淆两者(除非您进入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/,这是指我在Visual Studio中同时运行的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)

转载注明原文:typescript – .NET Core和Angular 2工作流程 - 代码日志