AngularJS 路由可以用于某些 URL 而常规 GET 请求用于其他吗?

Can AngularJS routing be used for some URLs and regular GET requests used for others?

我开发了一个 ASP.NET MVC 应用程序,它最初使用传统导航(HTTP GET 和 POST)并且没有 AJAX/Fetch 功能。随着时间的推移,我们引入了 AngularJS 以利用双向绑定和其他 UI 改进,但每个页面仍然是自己独立的 app/module。也就是说,我们不使用 AngularJS 路由,而是在页面加载时使用传统的 GET 请求。这意味着 angular.js 每次加载和引导,页面本身是一个独立的模块和控制器。

我们想开始使用 AngularJS 的路由来使我们应用程序的某些部分充当 SPA,最终目标是使整个站点成为一个使用 AngularJS 路由的 SPA。以应用程序的规模和我们的小团队,一次完成是不可行的,所以我们需要逐步完成。

是否可以让某些 URL 使用 AngularJS 的路由,而让其他 URL 执行完整的页面加载 (GET)?例如:

+------------------------------+-------------------------------+-------------------+
|         Current URL          |      URL to navigate to       |  Navigation type  |
+------------------------------+-------------------------------+-------------------+
| site.com/employee/edit/42    | site.com/employee/contacts/42 | AngularJS routing |
| site.com/employee/edit/42    | site.com/branch/settings/123  | Traditional GET   |
| site.com/branch/settings/123 | site.com/employee/edit/42     | Traditional GET   |
+------------------------------+-------------------------------+-------------------+

同一个 "section" 软件中的页面(在本例中为 /employee/*)将属于同一个 AngularJS 模块,并且在其中的一个页面之间导航该模块将使用 AngularJS 路由。所有其他导航将依赖常规 GET 请求。

这个问题的答案是肯定的。

我首先建议使用 ui-router 项目进行所有路由。他们的文档非常好 ui,Angular 团队通过他们自己的路由器推荐它。

该库的默认路由模式利用文档片段进行导航,因此如果您要在 site.com/employee/spa/index.html 托管您的 AngularJS 站点,您可以使用 ui-通过文档片段的路由器库。

所以你会看到类似

的东西
site.com/employee/spa/#!/contacts/42
site.com/employee/spa/#!/contacts/3000
site.com/employee/spa/#!/contacts/42/detail

等...

如果您直接请求这些 url 之一,您使用的任何网络服务器都不会看到这些文档片段,只能看到站点。com/employee/spa。一旦页面呈现 ui-router 将处理路由/数据解析。

您可能出于某些原因不想使用文档片段。这方面的一个例子是与单点登录 oAuth 服务集成。当重定向回您的站点时,他们也将无法使用文档片段,因此您将始终必须在您的根位置接受他们的请求。

为此你可以切换到 html5 模式:https://docs.angularjs.org/api/ng/provider/$locationProvider#html5Mode

在此模式下,文档片段将消失。这意味着您的网络服务器将看到所有完整的 url 请求,而不是

site.com/employee/spa/#!/contacts/3000

他们将发送

site.com/employee/spa/contacts/3000

您可以在网络服务器中配置规则,将所有请求重定向到 site.com/spa/employee 之后的任何内容,然后转到 site.com/employee/spa/index.html 来解决这个问题。这取决于您使用的网络服务器。

除非您绝对需要使用 html5 模式,否则我个人会坚持使用默认设置。

编辑:为您的水疗路线添加了 SPA 路径,我没有意识到您指定了两条员工路线。您绝对应该在员工之前指定某部分是特定于 SPA 的。

编辑 编辑:您可以慢慢地将您的其他员工路由迁移到 spa 并开始对您的其他路由执行相同的操作,最终所有内容都可以迁移到 /spa/ root 并且您可以完全消除对它的需求。