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

标签 typescript angular asp.net-core-mvc asp.net-core-1.0

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

最佳答案

我一直将 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 团队创建了 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”文件夹中的所有 Assets 复制到您的 asp.net 项目中(gulp 使这变得快速和容易)。仅使用一个 Razor View 和一个 Razor View 来为您的网页提供服务。下面是这种 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 核心“服务器”在一个单独的项目中。

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

关于typescript - .NET Core 和 Angular 2 工作流程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38270449/

相关文章:

angular - 将 ionic3 转换为 apk 构建

angular - Ionic 2 自定义后退按钮操作

javascript - Typescript 在嵌套 for 循环完成后执行代码

asp.net-core - 在 IIS 中部署 MVC 6 应用程序

Typescript:获取类型的第一个属性的类型

javascript - 如何删除多个空数组包装并仅保留对象

json - Observable with Angular 4 , NgFor 只支持绑定(bind)到 Iterables 比如数组

Angular 4 从另一个组件访问元素

c# - 无效操作异常 : The view 'ViewName' was not found after adding route

azure - Asp.net core从azure云blob段获取所有文件