我想知道使用 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/