Angular路由如何优先于静态站点上的文件路径
How does Angular routing take precedence over file paths on a static site
如果我使用文件结构构建静态站点:
-index.html
-blog/index.html
然后我在 blog/index.html
中放置了一个带有路由的 Angular 应用程序,然后转到路由 example.com/blog/page/2
,它会转到 Angular 应用程序中正确的博客页面.从某种意义上说,它打开 /blog/index.html
,并在 Angular 应用程序中处理 /page/2
。
如何?
为什么 Apache(或 Nginx)不优先于它,并尝试打开 /blog/page/2/index.html
,但找不到它,显示 404?
我认为它能像这样工作真是太棒了,但我不知道它在技术上是如何实现的。
apache 或 nginx 或任何您的网络服务器都需要正确和有意地配置为服务 angular 应用程序。有无数关于各种 Web 服务器配置的指南,但通常您会配置任何 404 错误以重定向到项目根 index.html 页面。但是,如果出现 REAL 404,您的 angular 应用应该设置为正确处理它。
这仅用于初始页面加载或刷新。一旦 angular 应用程序启动并且 运行,这是一个有争议的问题,因为 angular 拦截并处理所有导航,因此它不会再次访问您的网络服务器。 angular 路由器只是调用它需要的文件并使用浏览器历史记录 API 将项目推送到您的网络历史记录中以模拟正常导航。它们被称为单页应用程序,因为实际上只有一个页面曾经从您的 Web 服务器提供服务,其余的都是技巧/模拟。
如果我使用文件结构构建静态站点:
-index.html
-blog/index.html
然后我在 blog/index.html
中放置了一个带有路由的 Angular 应用程序,然后转到路由 example.com/blog/page/2
,它会转到 Angular 应用程序中正确的博客页面.从某种意义上说,它打开 /blog/index.html
,并在 Angular 应用程序中处理 /page/2
。
如何?
为什么 Apache(或 Nginx)不优先于它,并尝试打开 /blog/page/2/index.html
,但找不到它,显示 404?
我认为它能像这样工作真是太棒了,但我不知道它在技术上是如何实现的。
apache 或 nginx 或任何您的网络服务器都需要正确和有意地配置为服务 angular 应用程序。有无数关于各种 Web 服务器配置的指南,但通常您会配置任何 404 错误以重定向到项目根 index.html 页面。但是,如果出现 REAL 404,您的 angular 应用应该设置为正确处理它。
这仅用于初始页面加载或刷新。一旦 angular 应用程序启动并且 运行,这是一个有争议的问题,因为 angular 拦截并处理所有导航,因此它不会再次访问您的网络服务器。 angular 路由器只是调用它需要的文件并使用浏览器历史记录 API 将项目推送到您的网络历史记录中以模拟正常导航。它们被称为单页应用程序,因为实际上只有一个页面曾经从您的 Web 服务器提供服务,其余的都是技巧/模拟。