Question

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

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

如果用户转到/main我想让它像用户一样点击/main/table/1而不会导致网址更改。

我怎样才能做到这一点？

以下是我的陈述：

$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

我创建了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',
})

这将是表格视图的控制器

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

全部检查here

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

该视图（用于显示表格）与我们用于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
        "@" : { } 
  });

Answer 2

stateProvider url属性负责浏览器URL路由机制。 stateProvider templateUrl属性是一个html局部视图模板，它将针对特定的状态进行渲染，在我们的例子中它是 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': { ... }

}）

角度路线就像另一条没有网址变化的路线

2 个答案:

View Names - Relative vs. Absolute Names