Angular 路线就像另一条路线一样，没有 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

stateProviderurl属性负责浏览器URL路由机制。 stateProvider templateUrl 属性是一个 html 局部视图模板，在我们的例子中将根据特定的 state 呈现它是 main.

$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': { ... }

})

Answer 2

我创造了working plunker here。诀窍是直接在主状态中重用 "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',
})

这将是 table 视图的控制器

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

全部检查here

这里使用的技巧是：主状态确实有两个视图。其中之一是主要的 - 布局模板。第二个是立即将其他视图注入该布局。 via absolute naming '@main' (state main 未命名视图)

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

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

View Names - Relative vs. Absolute Names

示例片段的小摘录：

$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
        "info@contacts.detail" : { }

        // 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
        "@" : { } 
  });

Angular 路线就像另一条路线一样，没有 url 变化

Angular route act like another route without url change

angularjs

angular-ui

angular-ui-router

View Names - Relative vs. Absolute Names