如何在Angular中构建通向另一个嵌套路由的嵌套路由? UI.Router

时间:2016-01-31 01:29:01

标签: angularjs meteor routing angular-ui-router angular-directive

我已将所有UI.Router状态编写为Angular指令,采用本教程中所见的组件样式:http://www.angular-meteor.com/tutorials/socially/angular1/routing-and-multiple-views

这是我想要做的。我有3个主要状态,具有以下嵌套状态:

- 仪表板
- 个人注意事项
------- unlockedPersonalNotes
------- lockedPersonalNotes
- publicNotes
------- unlockedPublicNotes
------- lockedPublicNotes

如您所见,PublicNotes - > UnlockedPublicNotes是嵌套状态。 UnlockedPublicNotes(和兄弟姐妹)是一个列出笔记的页面。单击注释应该会转到“详细注释”页面。我的问题是,详细笔记是否是自己的嵌套嵌套状态?

这就是我的路由目前的样子:

$stateProvider
        .state('dashboard', {
          url: '/dashboard',
          template: '<dashboard></dashboard>'
        })
        .state('personalNotes', {
          url: '/personalNotes',
          template: '<personal-notes></personal-notes>'
          })
        .state('publicNotes', {
          url: '/publicNotes',
          template: '<public-notes></public-notes>'
        })

我应该如何在Angular的UI中设置它.Router?也许有比三重嵌套状态更好的方法。

如果重要的话,我正在使用Angular-Meteor。 谢谢您的帮助! :)

1 个答案:

答案 0 :(得分:0)

这可能是嵌套结构:

$stateProvider
  .state('dashboard', {url: '/dashboard',template: '<dashboard></dashboard>'})
  .state('personalNotes', {url: '/personalNotes',template: '<personal-notes</personal-notes>'})
  .state('publicNotes', {url: '/publicNotes',template: '<public-notes></public-notes>'})
  .state('publicNotes.unlocked', {url: '/unlocked', template:'<ulpn></ulpn>'})
  .state('publicNotes.locked', {url: '/locked', template:'<lpn></lpn>'})
  .state('publicNotes.unlocked.details', {url: '/details', template:'<note-details></note-details>'})
  ...