角度路由就像另一条路由一样，没有 url 更改

Question

我正在使用Angular-UI路由器，在我的项目中，我有这样的页面结构：

- Main (/main)
-- Table (/main/table/:userid)
-- Info (/main/info)
-- About (/main/about)

如果用户转到/main我希望它像用户点击/main/table/1一样，而不会导致 url 更改。

我怎样才能做到这一点？

以下是我的状态：

$stateProvider
.state('main', {
    'url': '/main',
    'templateUrl': '/pages/main.html',
    'controller': 'MainController',
    'resolve': { ... }
})
.state('main.table', {
    'url': '/main/table/:userid',
    'templateUrl': '/pages/table.html',
})
.state('main.info', {
    'url': '/main/info',
    'templateUrl': '/pages/info.html',
})
.state('main.about', {
    'url': '/main/about',
    'templateUrl': '/pages/about.html',
})

Answer 1

我在这里创建了工作 plunker。诀窍是直接在主状态中重用"main.table"的东西。

我们可以像这样定义主状态：

  $stateProvider
    .state('main', {
      'url': '/main',
      views: {
        '': {
          'templateUrl': '/pages/main.html',
          'controller': 'MainController',
        },
        '@main': {
          'templateUrl': '/pages/table.html',
          'controller': 'TableController',
        }
      }
    })

而这些几乎不变，只是/main 从 url 中替换，它将由父级传递。

.state('main.table', {
    'url': '/table/:userid',
    'templateUrl': '/pages/table.html',
    'controller': 'TableController',
})
.state('main.info', {
    'url': '/info',
    'templateUrl': '/pages/info.html',
})
.state('main.about', {
    'url': '/about',
    'templateUrl': '/pages/about.html',
})

这将是表视图的控制器

.controller('TableController', function($scope, $stateParams) {
  $scope.userid = $stateParams.userid || 1;  
})

在这里查看所有内容

这里使用的技术是：主状态确实有两个视图。其中之一是主要的布局模板。第二个是立即将其他视图注入该布局。通过绝对命名'@main'（状态主中的未命名视图）

该视图（用于显示表格）与我们用于main.table状态的视图相同。我们只是检查，如果没有参数用户ID - 1 被使用

在此处阅读有关此多视图的更多信息

视图名称 - 相对名称与绝对名称

示例片段的小摘录：

$stateProvider
  .state('contacts', {
    // This will get automatically plugged into the unnamed ui-view 
    // of the parent state template. Since this is a top level state, 
    // its parent state template is index.html.
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        ////////////////////////////////////
        // Relative Targeting             //
        // Targets parent state ui-view's //
        ////////////////////////////////////
        // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
        // <div ui-view='detail'/> within contacts.html
        "detail" : { },            
        // Relatively targets the unnamed view in this state's parent state, 'contacts'.
        // <div ui-view/> within contacts.html
        "" : { }, 
        ///////////////////////////////////////////////////////
        // Absolute Targeting using '@'                      //
        // Targets any view within this state or an ancestor //
        ///////////////////////////////////////////////////////
        // Absolutely targets the 'info' view in this state, 'contacts.detail'.
        // <div ui-view='info'/> within contacts.detail.html
        "[e-mail]" : { }
        // Absolutely targets the 'detail' view in the 'contacts' state.
        // <div ui-view='detail'/> within contacts.html
        "detail@contacts" : { }
        // Absolutely targets the unnamed view in parent 'contacts' state.
        // <div ui-view/> within contacts.html
        "@contacts" : { }
        // absolutely targets the 'status' view in root unnamed state.
        // <div ui-view='status'/> within index.html
        "status@" : { }
        // absolutely targets the unnamed view in root unnamed state.
        // <div ui-view/> within index.html
        "@" : { } 
  });

Answer 2

stateProvider url 属性负责浏览器 URL 路由机制。stateProvider templateUrl 属性是一个 html 部分视图模板，它将针对特定状态呈现，在我们的例子中它是主要的。

$stateProvider
    .state('main', { // **main** is a state.
    'url': '/main', // **/main** is a preferred url you want to set in the browser.
    'templateUrl': '/main/table/1', // **/main/table/1** is a template to be rendered.
    'controller': 'MainController',
    'resolve': { ... }

}）