javascript - 在 AngularJS UI-Router 中创建 View 的最简洁的方法是什么？

Question

我创建了这个应用程序:

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，该应用程序运行完美，但我只是在寻找制作 View 的最佳方式，如您所见，每次我导航到路线时，我们都会重复通过重写相同的 View 来获得相同的 View ，例如:标题相同，侧边栏...等。

Answer 1

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

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