javascript - AngularJS UI 路由器、部分 View 和从浏览器的位置栏调用 View

Question

我有这个路由器条目

$locationProvider.html5Mode(true);

.state("main", {
    url: "/",
    views: {
         '' : { templateUrl: 'views/main.html' },
        'performance-ui-view@main': {
            templateUrl: 'views/gdreport.html',
            controller : 'GlobalDashboardController'
        }
    }
})

.state("main.odometer", {
url: "/odometer",
views: {
    'performance-ui-view@main': {
        templateUrl: 'views/odometer.html'
    }
}
})

它在使用鼠标时工作正常。我被正确重定向到页面。直到上周，里程表页面一直是我们的着陆页。此外，还有另一个 AngularJS 应用程序专门加载我们的应用程序，它们需要在里程计页面中。上周，我们收到了 UI 设计师的新设计。我更改了菜单和登录页面。它不再是里程表了。我们的 QA 测试人员发现这是一个正确的错误。

所以我尝试注释掉 $locationProvider.html5Mode(true);所以我可以在浏览器位置看到路径。然后我在我的浏览器上尝试了这些调用，但没有成功。它总是转到 gdreport.html，有时甚至是空白。

http://localhost:9000/#/odometer
http://localhost:9000/#//odometer
http://localhost:9000/odometer

我做错了什么？

Answer 1

这里的重点是父子 url 继承。有一个 working plunker with example .

A child url is built from its ancestors and its own url def. But we can override that behaviour.

示例中的状态如上(main 和 main.odometer)，加上名为 main.other 的全新状态。新的具有不同的 url 定义 - 带有前导符号 ^

// States
$stateProvider
  .state('main', {
      url: "/",
      ...
  })
  .state('main.odometer', {
      url: "/odometer", // will be //odometer
      ...
  })
  .state('main.other', {
      url: "^/other",   // will start from the root /other
      ...
  })

因此，在这种情况下，这些链接将具有以下 url:

  <a ui-sref="main.odometer">- will be parent plus child url //odometer
  <a ui-sref="main.other"> - will result in /other

查一下here

文档:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });