angularjs - UI-Router 在状态未定义时让 URL 通过

Question

我想使用 Angular UI-Router，但是我需要它让 $stateProvider 中未定义(url)的任何 url 通过浏览器(并使浏览器导航页面) 或 $urlRouterProvider。

我搜索了他们的文档、API 等，但找不到相关的引用资料，除了我之前使用过的 $state.reload() ..

Answer 1

更新:请参阅底部的更新。

根据您的评论，我做出以下假设:

• 您的 Angular 应用位于域 foo.com/ 的根目录下
• 您正在使用 HTML5 模式，因此您的应用会响应“自然”网址，例如 foo.com/thing1 和 foo.com/thing2
• 你有一些其他应用程序(不是你的主要 Angular 应用程序)位于 foo.com/admin

不幸的是，您不能像您希望的那样让 url“通过”。 :(

您的选择是:

• 将您的 Angular 应用程序移动到一个子目录中，例如 foo.com/app。然后，您的应用将响应 foo.com/app/thing1 和 foo.com/app/thing2 等 URL。
  • 如果您想使用 HTML5 路由模式来获得“自然”外观的 url，这确实是唯一的选择。
• 关闭 HTML5 路由模式，以便您的 Angular 应用位于 http://foo.com/#/ 并响应像 foo.com/#/thing1 这样的 url > 和 foo.com/#/thing2。然后，当您的用户访问 foo.com/admin 时，该 url 将落入服务器并获取那里提供的任何应用程序。

注意:这既适用于使用 $routeProvider 的常规 Angular 路由，也适用于使用 Angular-UI 的 $stateProvider。

更新:

为了让它工作，您必须让 url 更改发生在 Angular 之外。这是一种可行的方法，但在 IMO 看来它有很大的气味，并且可能非常脆弱且难以维护。

angular.module('myApp', [])
   .run(function($rootScope, $window){
      $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl){
        // You'll probably want to just watch the path and build the full url
        // based on your environment, but this will get you started.
        if(newUrl === 'http://127.0.0.1/admin') {
          // prevent Angular from continuing with the location change
          event.preventDefault();
          // $window is an Angular wrapper around the global ``window`` object.
          // This causes the browser to go to the new url outside of Angular
          $window.location.href = newUrl;
        }
      });
});

当然，要使其正常工作，您的服务器必须设置为在 /admin 路径中为其他应用程序提供服务。此外，当您的用户导航回您的 Angular 应用时，它将丢失所有状态，因为 Angular 应用将重新启动。另外，您的用户将不得不导航回您的 Angular 应用程序的root。如果用户从 foo.com/ 转到 foo.com/thing1 再到 foo.com/admin 他们将需要导航回 foo.com/ 返回到您的 Angular 应用程序。