How to display ui-router state on whole page?

Question

I'm using ui-router for state handling. This works fine, but now I have to create page 404 and would like to display it on the whole page and not inside the page as 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 display all the pages, outside of this I have logo, menu, etc.. which I would like to hide while displaying 404 page.

How can I do it?

Answer 1

Personally I would redesign the index.html, and bring the outer template (logo, menu, etc), into it's own template and state. Then you can sit 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'
    });

Then you just need to put your logos/menus, etc inside appcontainer.html, and then just have a single <div ui-view></div> inside your index.html. Also if you do it this way, don't forget to add the child ui-view inside appcontainer.html.