为什么我需要一个 HTTP 服务器来运行 Angular 2? [英] Why do I need a HTTP-server to run Angular 2?

问题描述

我从传统的后端Java/Spring环境学习Angular 2框架，并且很难掌握许多基本概念.

I come from traditional back-end Java/Spring environment to learn Angular 2 framework, and have hard time to grasp many of the fundamental concepts.

我正在阅读 Manning 的书 Angular 2 Development with TypeScript，它说我需要 HTTP-server 来运行我的 SAP'.这是为什么?

I'm reading the Manning book Angular 2 Development with TypeScript and it says I need HTTP-server to run my SAP's. Why is that?

我认为 Angular 在客户端机器上运行.那么服务器的功能究竟是什么?如果我只是打开 HTML，Angular 不会发挥它的魔力.

I thought Angular runs in client machine. So what is exactly function of the server? If I just open the HTML, Angular doesn't do its magic.

推荐答案

事实上，Angular 应用程序假设使用 HTTP 协议访问，因此使用 HTTP 服务器进行开发是个好主意.您将处于相同条件".此外，这可以防止出现一些限制和限制:

In fact, Angular applications suppose to be accessed using the HTTP protocol so it's a good idea to use an HTTP server for development. You will be in the "same conditions". In addition this prevents from having some limitations and restrictions:

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

• Absolute links relative to a domain name. I mean if you try to reference a resource with an absolute path from the root path of your domain. This won't probably work with the file protocol since its root path is the root folder of your file system
• JavaScript and AJAX. JavaScript doesn't work well with the file:// protocol and you can some security restrictions according to browsers.

有关这些问题的更多详细信息，请参阅这些链接:

See these links for more details about these issues:

• https://developer.mozilla.org/en-US/Learn/Open_a_file_in_a_browser#Opening_a_local_file
• https://github.com/mrdoob/三.js/wiki/How-to-run-things-locally

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

Regarding the choice of a Web server, static Web servers are enough for Angular applications and there are several lightweight HTTP servers for this purpose:

• http-server - https://github.com/indexzero/http-服务器
• lite-server - https://github.com/johnpapa/lite-服务器

• http-server - https://github.com/indexzero/http-server
• lite-server - https://github.com/johnpapa/lite-server

一个有趣的功能(例如lite-server)包括实时重新加载.服务器检测您何时更新了某些内容(HTML、JavaScript、CSS)并自动在浏览器中重新加载相应的页面.这可以让您在实施应用程序时更加高效.

An interesting feature (with lite-server for example) consists in the live reload. The server detects when you updated some contents (HTML, JavaScript, CSS) and automatically reloads corresponding pages in the browser. This allows you to be more efficient when implementing your application.

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

Finally if you implement both client (Angular) and server sides, these parts should be executed on different servers (in development environment it could / should be different in other environments like production). I mean:

• 前端的静态 HTTP 服务器，它只为 Angular 应用程序提供元素.
• 用于后端的动态 HTTP 服务器，提供服务器端处理.您可以在这里自由使用您想要的技术(Node、Java 等)

• A static HTTP server for the front end which only serves the elements for the Angular application.
• A dynamic HTTP server for the back end which provides the server-side processing. You are free here to use the technology you want (Node, Java, ...)

因为有这两个服务器，所以必须开启CORS(Cross Origin Resource Sharing)，才能让Angular应用在服务器应用上执行AJAX请求.事实上，你们不在同一个域中.当浏览器在请求中发送 Origin 标头时，必须在服务器端配置它以返回 CORS 标头.有关更多详细信息，您可以查看以下链接:

Because of these two servers, you must enable CORS (Cross Origin Resource Sharing) to make possible the Angular application to execute AJAX requests on the server application. As a matter of fact, you aren't on the same domain. It's something that must be configured on the server side to return CORS headers when the browser sends an Origin header in the request. For more details you can have a look at these links:

• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

如果您使用 Angular 的路由功能，需要注意的另一件事是 HTML5 历史模式模拟一些真实"地址，但在这种情况下，您需要在网络服务器上进行一些配置以加载 index.html(您的条目点文件)用于每个路由对应的每个 URL.有关更多详细信息，请参阅此答案:当我刷新我的网站时，我得到一个 404.这是 Angular2 和 firebase.

Another thing to be aware of if you use the routing feature of Angular is that the HTML5 history mode simulates some "real" addresses but you need in this case some configuration on your webserver to make load the index.html (your entry point file) for each URLs corresponding to each routes. See this answer for more details: When I refresh my website I get a 404. This is with Angular2 and firebase.

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

The last point to consider is the packaging of your application for your production environment. You need to make your application efficient (minifying elements, concating JavaScript files, preloading templates, ...). At this level, it's not necessary to keep two separate servers and the Angular part can be packaged within the server side application. In this case, the latter must be able to serve some statis files.

希望对你有帮助蒂埃里

这篇关于为什么我需要一个 HTTP 服务器来运行 Angular 2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！