如何在AngularJS中设置嵌套视图?

我有一个应用程序与各种屏幕 。 每个屏幕都分配了一个URL,例如#mailscontacts等。

在我的主要HTML文件中,我有一个ng-view元素,根据用户select的路线进行更新。 到现在为止还挺好。

现在其中一些屏幕有一个子导航。 例如, #mails确实有一个收件箱和一个发送文件夹。 他们介绍自己有两列:左侧的子导航,右侧的适当的文件夹的邮件。

当您导航到#mails/inbox ,它将redirect到#mails/inbox ,这样基本上收件箱邮件的默认子视图。

我怎么能设置?

我现在能想到的唯一方法是(对于AngularJS,我相当新颖,因此原谅我,如果这个问题有点幼稚的话)是有两个视图,一个是#mails/inbox ,另一个是#mails/sent

当你select一个路线时,这些视图被加载。 当您select#mails它只是redirect到#mails/inbox

但这意味着这两个视图都必须使用ng-include作为子导航。 不知怎的,这对我来说是不对的。

我想要更多的是有嵌套视图:顶部之一切换屏幕之间,如邮件,联系人等,最底下的一个变化之间的子视图,如收件箱,发送等。

我将如何解决这个问题?

AngularJS ui路由器解决了我的问题:-)

另一个图书馆检查: http : //angular-route-segment.com

你可以使用它而不是内置的ng-view$route

示例路由configuration看起来像这样:

 $routeSegmentProvider. when('/section1', 's1.home'). when('/section1/prefs', 's1.prefs'). when('/section1/:id', 's1.itemInfo.overview'). when('/section1/:id/edit', 's1.itemInfo.edit'). when('/section2', 's2'). segment('s1', { templateUrl: 'templates/section1.html', controller: MainCtrl}). within(). segment('home', { templateUrl: 'templates/section1/home.html'}). segment('itemInfo', { templateUrl: 'templates/section1/item.html', controller: Section1ItemCtrl, dependencies: ['id']}). within(). segment('overview', { templateUrl: 'templates/section1/item/overview.html'}). segment('edit', { templateUrl: 'templates/section1/item/edit.html'}). up(). segment('prefs', { templateUrl: 'templates/section1/prefs.html'}). up(). segment('s2', { templateUrl: 'templates/section2.html', controller: MainCtrl});