Javascript 在AngularJS UI路由器中创建视图最干净的方法是什么？

我已创建此应用程序：

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

}]);

---

正如你所看到的，有两条路线：/list和/details，这个应用程序运行得很好，但我只是在寻找创建视图的最佳方式，正如你所看到的，每次我导航到一条路线时，我们都会通过重写相同的视图来重复相同的视图，例如：标题相同，边栏。。。等等。

您可以创建一个状态层次结构，只需将详细信息状态作为应用程序的子状态

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

---

谢谢，我将代码更改为：

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

在我的索引中，我有：

    <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>

---

问题是，当我第一次进入应用程序时（否则可以正常工作），但当尝试单击带有详细信息/id的超链接时，我得到了以下错误：错误：无法从状态“home.list”解析“详细信息”，我现在有点困惑

你想问一个新问题吗？这是作为一个答案发布的，似乎是对一种新的代码结构方式的解释，直到底部提到其他错误为止。如果您对收到的新错误有疑问，应该在新问题中发布，而不是在答案中发布。