为什么我需要HTTP服务器来运行Angular 2?

时间:2016-01-03 19:35:41

标签: angular typescript web frontend

我来自传统的后端Java/Spring环境来学习Angular 2 framework,并且很难掌握许多基本概念。

我正在阅读曼宁的书使用TypeScript进行Angular 2开发,并说我需要HTTP-server来运行我的SAP'。这是为什么?

我认为Angular在客户端计算机上运行。那么服务器的功能到底是什么?如果我只是打开HTMLAngular就不会发挥其魔力。

5 个答案:

答案 0 :(得分:19)

事实上,Angular应用程序假设使用HTTP协议进行访问,因此最好使用HTTP服务器进行开发。你将处于“相同的条件”。此外,这可以防止出现一些限制和限制:

  • 相对于域名的绝对链接。我的意思是,如果您尝试使用域的根路径中的绝对路径引用资源。这可能不适用于文件协议,因为它的根路径是文件系统的根文件夹
  • JavaScript和AJAX 。 JavaScript不适用于file://协议,根据浏览器,您可以使用某些安全限制。

有关这些问题的详细信息,请参阅以下链接:

关于Web服务器的选择,静态Web服务器对于Angular应用程序已经足够了,并且为此目的有几个轻量级HTTP服务器:

一个有趣的功能(例如lite-server)包含实时重新加载。服务器会检测您何时更新某些内容(HTML,JavaScript,CSS)并自动在浏览器中重新加载相应的页面。这使您在实施应用程序时更有效率。

最后,如果同时实现客户端(Angular)和服务器端,这些部分应该在不同的服务器上执行(在开发环境中,它可以/应该在生产等其他环境中不同)。我的意思是:

  • 前端的静态HTTP服务器,仅提供Angular应用程序的元素。
  • 后端的动态HTTP服务器,提供服务器端处理。您可以在这里使用您想要的技术(Node,Java,...)

由于这两个服务器,您必须启用CORS(跨源资源共享)以使Angular应用程序能够在服务器应用程序上执行AJAX请求。事实上,你不在同一个领域。当浏览器在请求中发送Origin标头时,必须在服务器端配置以返回CORS标头。有关详细信息,请查看以下链接:

如果您使用Angular的路由功能,另一件需要注意的事情是HTML5历史记录模式会模拟一些“真实”地址,但在这种情况下您需要在Web服务器上进行一些配置以加载index.html(您的条目)对应于每条路由的每个URL的点文件)。有关详细信息,请参阅此答案:When I refresh my website I get a 404. This is with Angular2 and firebase

要考虑的最后一点是为生产环境打包应用程序。您需要使应用程序高效(缩小元素,汇总JavaScript文件,预加载模板......)。在这个级别,没有必要保留两个单独的服务器,Angular部分可以打包在服务器端应用程序中。在这种情况下,后者必须能够提供一些statis文件。

希望它可以帮到你, 亨利

答案 1 :(得分:6)

如果它与AngularJS 1.3类似,它会使AJAX请求获取HTML模板,至少它需要一个真正的HTTP服务器。

答案 2 :(得分:4)

目前Angular默认使用PathLocationStrategy,这需要服务器执行一些重定向(例如参见Angular 2.0 router not working on reloading the browser) 如果您使用HashLocationStrategy,则无需这样做。 通常,您无论如何都要从HTTP服务器加载浏览器应用程序,如果正确配置Angular,则应该这样做。

在开发过程中,您需要一台服务器,因为浏览器在您直接从文件加载时会有一些限制。

答案 3 :(得分:2)

它需要一个lite-server来提供静态文件。

这背后的原因是安全性。

浏览器不允许直接请求文件系统。

答案 4 :(得分:1)

我只是发现lite-server不会为我安装。

angular-http-server开箱即用对我来说很完美:

https://www.npmjs.com/package/angular-http-server