ui-router 用于在不使用视图的情况下手动解析 URL

Question

我想观察一个位置并在位置发生变化时运行一个函数。 我还希望能够通过运行函数轻松更改位置。 我希望能够使用浏览器的后退按钮。

对于ngRoute 或ui-router 来说，这听起来像是一个不错的任务

没有。

我不需要视图、模板和控制器。

我想要ui-router 和ngRoute 的强大功能来解析URL 并获得stateParams。

换句话说：如何在不使用视图、模板或控制器的情况下使用angular 中的路由？

Answer 1

听起来您需要的只是$location 服务。您可以在没有ngRoute 或ui-route 的情况下使用它。

$location 服务。它有什么作用？

$location 服务解析浏览器地址栏中的 URL（基于 window.location）并使 URL 可用于您的应用程序。地址栏中 URL 的更改会反映到$location 服务中，对$location 的更改会反映到浏览器地址栏中。

$location 服务：

• 在浏览器地址栏中公开当前 URL，以便您可以
  • 观察并观察 URL。
  • 更改网址。
• 在用户访问时保持自身与浏览器 URL 之间的同步
  • 更改浏览器地址栏中的地址。
  • 单击浏览器中的后退或前进按钮（或单击历史记录链接）。
  • 点击页面中的链接。
• 将 URL 对象表示为一组方法（协议、主机、端口、路径、搜索、哈希）。

-- AngularJS Developer Guide -- Using $location

活动

$locationChangeStart

在 URL 更改之前广播。

$locationChangeSuccess

在 URL 更改后广播。

-- AngularJS $location Service API Reference

您可以在没有 Angular 路由器或 Angular-UI 路由器的情况下使用 $location 服务。事实上，如果你想推出自己的路由器，你可以使用它。

Answer 2

我不确定您的设置是什么，但是如果您控制所有路由并且它们相当有限，那么您可以尝试添加“抽象”状态，它们不需要视图或控制器。我认为顺便说一句，普通州也不需要这样做，但不是 100% 肯定。

也许如果您为应用程序的顶部定义抽象路由，那么您将获得所有“理论”子级的事件。

你可以找到一个抽象状态的例子here

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
    })

现在如果你去 /contacts 你应该得到 stateChange 的事件，我想如果你去 /contacts/something 也会得到它。在最坏的情况下，您可能会将整个应用程序定义为所有抽象的父/子状态的树。

要处理你需要这样做的事件：

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var greeting = toState.data.customData1 + " " + toState.data.customData2;
    console.log(greeting);