如何在整個頁面上顯示ui-router狀態？

Question

我正在使用ui路由器進行狀態處理。這工作正常，但現在我必須創建頁面404，並希望顯示它在整個頁面上，而不是頁面內的其他頁面。

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
    function ($stateProvider, $urlRouterProvider, $locationProvider) { 

     $locationProvider.hashPrefix('!').html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 

     $stateProvider 
     .state('stateIndex', { 
        url: '/', 
        templateUrl: '/templates/list.html', 
        controller: 'dashListController'  
     }) 
     .state('stateList', { 
        url: '/list', 
        templateUrl: '/templates/list.html', 
        controller: 'dashListController' 
     }).state('stateDashboard', { 
        url: '/dashboard/:id', 
        templateUrl: '/templates/dashboard.html', 
        controller: 'dashboardController' 
     }) 
     .state('stateWidgetsList', { 
        url: '/widgetsList', 
        templateUrl: '/templates/widgetsList.html', 
        controller: 'widgetsListController' 
     }) 
     .state('404', { 
      url: '/404', 
      templateUrl: '/templates/404.html' 
     }); 
}]); 

，並在我的index.html我有

<div ui-view></div> 

，我顯示所有的頁面，在此之外我有標誌，菜單等。我想隱藏在顯示404頁。

我該怎麼辦？

Answer 1

就我個人而言，我會重新設計index.html，並將外部模板（徽標，菜單等）帶入它自己的模板和狀態。然後你可以在ui-router層次結構中坐下它的子狀態。例如：

$stateProvider 
    .state('app', { 
       abstract: true, 
       url: '', 
       templateUrl: '/templates/appcontainer.html' 
    }) 
    .state('app.stateIndex', { 
       url: '/', 
       templateUrl: '/templates/list.html', 
       controller: 'dashListController'  
    }) 
    .state('404', { 
     url: '/404', 
     templateUrl: '/templates/404.html' 
    }); 

接下來，你需要把你的標識/菜單等內appcontainer.html，然後只需要您的index.html內單<div ui-view></div>。同樣，如果你這樣做，不要忘記在appcontainer.html內添加孩子ui-view。

Answer 2

您可以創建一個根父狀態，該狀態將包含您的佈局內容（徽標，菜單等），並讓404以外的狀態生效。

路線

$stateProvider 
    .state('root', { 
    abstract: true, // makes this state not directly accessible 
    templateUrl: 'root.html' 
    }) 
    .state('root.stateIndex', { 
    url: '/', 
    templateUrl: '/templates/list.html', 
    controller: 'dashListController' 
    }) 
    // ... 
    .state('404', { 
    url: '/404', 
    templateUrl: '/templates/404.html' 
    }); 

root.html

<nav><!-- menu stuff --></nav> 
<ui-view></ui-view> 
<footer></footer>