使用UI路由器模块化AngularJS应用程序

Question

我正在尝试模块化使用UI-Router的大型AngularJS应用程序（1.4.8）。

目前的结构是这样的：

transactionApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('root', {
        url: '/transaction',
        views: {
            'header': {
                templateUrl: '/Partials/Shells/Header/header-partial.html',
                controller: 'headerController',
                resolve: {
                    headerItems: ['$http', function ($http) {
                        var data = {};
                        data["__RequestVerificationToken"] = $('[name=__RequestVerificationToken]').val();
                        if (dataForLayout.IsLoggedIn) {
                            return $http({
                                method: 'POST',
                                url: '/myaccount/GetHeaderAccountInfo',
                                data: data
                            });
                        }
                    }]
                }
            },
            'footer': {
                templateUrl: '/Partials/Shells/Footer/footer-partial.html',
                controller: 'footerController'
            },
            'mainPanel': {
                templateUrl: '/Partials/Shells/Transaction/transaction-partial.html',
                controller: 'mainPanelController'
            },
            'successPanel': {
                templateUrl: '/Partials/Shells/Transaction/transaction-success-panel.html',
                controller: 'successPanelController'
            }
        }
    });

    $urlRouterProvider.otherwise('/transaction');

    // Enable HTML5Mode for #-urless
    $locationProvider.html5Mode(true);

}]);

我要模块化的部分是“mainPanel”。 mainPanel包括步骤1，步骤2，步骤3和最终审核/提交页面。如果可能/有益，我也想分开弹出模式。步骤，审阅页面和模态相互依赖。

无论用户在哪一步，网址都必须保留“/ transaction”。

我想象的是将父节点作为“mainPanel”连接子模块并具有“步骤1”，第2步，“等等的子模块。

我已经阅读了一些文章，但似乎找不到有关进一步模块化模块的文章。