在 AngularJS UI-Router 中制作视图的最干净的方法是什么？

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，该应用程序运行完美，但我只是在寻找制作视图的最佳方式，如您所见，每次我导航到一条路线时，我们通过重写相同的视图来重复相同的视图，例如：header 是相同的，sidebar ...等等

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

Answer 2

谢谢，我将代码更改为：

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

问题是我第一次进入应用程序（否则工作正常）但是当我试图点击带有 details/id 的超链接时我得到这个错误：错误：无法解析 'details' 来自状态 'home.list'，我现在有点困惑 !!!

在 AngularJS UI-Router 中制作视图的最干净的方法是什么？

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

javascript

angularjs

angular-ui

angular-routing

angular-ui-router