What is the cleanest way to make views in the AngularJS UI-Router?

Question

I've created this app :

var accolade = angular.module('accolade', [
    'ui.router', 
    'personControllers',
    'personFactories'
]);

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

$urlRouterProvider.
otherwise('/list');

$stateProvider.state('list', {
    url: '/list',
    resolve: {
        headerFactory:  function(headerFactory) {
            return  headerFactory;
        }
    },
    views: {
        'main': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        },
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        } 
    }
}).
state('details', {
    url: '/details/:id',
    resolve: {
        headerFactory:  function(headerFactory) {
            return  headerFactory;
        }
    },
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'main': {
            templateUrl: 'partials/details.html',
            controller: 'DetailsController'
        },

        'breadcrumb' : {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Details'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }           
    }
});

}]);

As you can see there are two routes: /list and /details, the app works perfectly but I'm just looking for the best way of making views, as you can see, everytime I navigate to a route, we repeat the same views by rewriting the same views for example: header is the same, sidebar ... etc.

Answer 1

You could create a state hierarchy just make details state as child state of your app

$stateProvider.state('main', {
    url: '/main',
    abstract: true,
    resolve: {
        headerFactory: function(headerFactory) {
            return headerFactory;
        }
    },
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }
    }
}).
state('main.list', {
    url: '/list',
    views: {
        'main@main.list': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        }
    }
}).
state('main.details', {
    url: '/details/:id',
    views: {
        'main@main.details': {
            templateUrl: 'partials/details.html',
            controller: 'ListController'
        }
    }
});

Answer 2

Thanks, i changed my code to :

$urlRouterProvider.
otherwise('/list');

$stateProvider.
state('home', {
    abstract: true,
    views: {
        'header': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderController'
        },
        'breadcrumb': {
            templateUrl: 'partials/breadcrumb.html',
            controller: function($scope) {
                $scope.breadcrumb = ['Home', 'Library', 'Data'];
            }
        },
        'sidebar': {
            templateUrl: 'partials/sidebar.html'
        }
    }

}).
state('home.list', {
    url: '/list',
    views: {
        'main@': {
            templateUrl: 'partials/list.html',
            controller: 'ListController'
        }
    }
}).
state('home.details', {
    url: '/details/:id',
    views: {
        'main@': {
            templateUrl: 'partials/details.html',
            controller: 'DetailsController'
        }         
    }
});

in my index i have this :

    <div class="container">
        <div class="row">
            <!-- SideBar -->
            <div ui-view="sidebar" class="col-xs-3 sidebar"></div>
            <!-- /.SideBar -->


            <div class="col-xs-8">
                <!-- Breadcrumb -->
                <div ui-view="breadcrumb" class="pull-right"></div>
                <!-- /.Breadcrumb -->

                <!-- Main Content -->
                <div ui-view="main"></div>
                <!-- /.Main Content -->
            </div>
        </div>
    </div>

the problem is that the first time i enter the app (the otherwise works fine) but when trying to click on a hyperlink with details/id i get this error : Error: Could not resolve 'details' from state 'home.list', i'm a little bit confused right now !!!