我有不同的屏幕的应用程序。 每个屏幕被分配一个URL,例如#
, mails
, contacts
,等等。
在我的主HTML文件我有一个ng-view
根据用户选择的路线,其更新元件。 到现在为止还挺好。
现在,一些屏幕有一个子导航。 例如, #mails
确实有一个收件箱和发文件夹。 他们提出themselfes有两列:子导航左侧,相应的文件夹的邮件上的权利。
当您导航到#mails
,应当重定向到#mails/inbox
,这样基本上收件箱是默认子视图的邮件。
我怎么能设置呢?
目前,我能想到的唯一方法(我很新的AngularJS,所以原谅我,如果这个问题有点幼稚)是有两种观点,一种为#mails/inbox
,另一个用于#mails/sent
。
当您选择的路线,这些意见被加载。 当您选择#mails
它只是将您重定向到#mails/inbox
。
但是,这意味着这两种观点必须使用ng-include
为分导航。 不知怎的,这感觉我错了。
我想更多的是嵌套的观点:网之间的顶部有一个开关,如邮件,联系人等,和子视图,如收件箱,发间的底部有一个变化,等等。
我将如何解决这个问题?
AngularJS UI路由器解决了我的问题:-)
另一个库退房: http://angular-route-segment.com
你可以用它代替内置的ng-view
和$route
。
样本航线的配置看起来像这样的:
$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});