AngularJS ui-router 如何确定应用程序的根 url？答案

【问题标题】：How does AngularJS ui-router determine the root url of the application?AngularJS ui-router 如何确定应用程序的根 url？
【发布时间】：2018-12-20 20:47:39
【问题描述】：

我想在 CMS (Telerik Sitefinity) 中托管一个 SPA。这个应用程序将托管在一个“小部件”中，网址为 http://host/foo/bar/product/{root of SPA}

我将使用 ui-router 来处理 url。如果我像下面这样配置路由状态，url '/' 会解析什么？

MyApp.config(function($stateProvider){
   var homeState = {
       name: 'home',
       url: '/',
       templateUrl: '/templates/home.html'
   }
   $stateProvider.state(homeState);
}

这条路线会到达http://host/ 或http://host/foo/bar/product/ 吗？

同样的问题也适用于 templateUrl：我需要它映射到http://host/foo/bar/product/

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

它将是http://host/foo/bar/product/，因为路由器将添加到末尾。这既有用又可能是一个缺陷 (see here)。 TemplateURL 也将以相同的方式运行，所以你很高兴！

【讨论】：

【解决方案2】：

来自文档：

基本 href 约束

如果当前 URL 位于作为基本 href 的 URL 之外，$location 服务将无法正常运行。这可能会产生微妙的混乱后果...

考虑一个基本的 href 设置如下：<base href="/base/">（即应用程序存在于名为 /base 的“文件夹”中）。 URL /base 实际上在应用程序之外（它指的是在根/文件夹中找到的基本文件）。

如果您希望能够通过诸如 /base 之类的 URL 导航到应用程序，则应确保您的服务器已设置为将此类请求重定向到 /base/。

更多信息请参见https://github.com/angular/angular.js/issues/14018。

— AngularJS Developer Guide - Using $location

【讨论】：