How to display ui-router status on the whole page?

Question

I am using ui-router to handle state. This works great, but now I have to create a 404 page and would like to display it on the whole page, and not inside the page, like on other pages.

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'
        });
}]);

and on my index.html I have

<div ui-view></div>

where I show all the pages, outside of this I have a logo, menu, etc. that I would like to hide when displaying a 404 page.

How can i do this?

Answer 1

Personally, I redesigned index.html and bring the external template (logo, menu, etc.) to its own template and state. Then you can place the child states below it in the ui-router hierarchy. For example:

$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, <div ui-view></div> index.html. , , ui-view appcontainer.html.

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>