ui-router用于手动解析URL而不使用视图

Question

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

听起来像是ngRoute或ui-router

的良好使命

没有

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

我希望ui-router和ngRoute能够解析网址并获取stateParams。

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

Answer 1

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

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

您可以找到抽象状态here

的示例

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

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

要处理此事件，您需要执行此操作：

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

Answer 2

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

  

$location服务。它做了什么？

     

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

     

$location服务：

     

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

- AngularJS Developer Guide -- Using $location

  

活动

     

$locationChangeStart

     

在网址更改之前广播。

     

$locationChangeSuccess

     

更改网址后广播。

- AngularJS $location Service API Reference

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