javascript - 使用 Angular UI Router 进行嵌套路由

Question

我有一个(可能很愚蠢的)AngularJS 问题，涉及嵌套 UI 路由器配置，希望这里的优秀社区能够提供帮助。

基本上，我有一个用于主菜单链接的标准 app.routes.js。代码(精简为有值(value)和通用的内容):

angular.module('app',[
    'ui.router',
    'ui.bootstrap',
    'oc.lazyLoad',
    'app.links'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider
            .state('index',{
                url:'/',
                views:{
                    'index':{
                        templateUrl:'app/app.view.html'
                    },
                    'header@index':{
                        templateUrl:'app/components/core/header/header.view.html',
                        controller:'HeaderController as headerCtrl'
                    }
                },
                resolve:{
                    loadLayoutModules:['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                name:'app.header',
                                serie:true,
                                files: [
                                    'app/components/core/header/header.module.js',
                                    'app/components/core/header/header.service.js',
                                    'app/components/core/header/header.controller.js',
                                    'app/components/links/links.module.js',
                                    'app/components/links/links.routes.js'
                                ]
                            }
                        ]);
                    }]
                }
            })

我在每个链接的链中还有其他几个.state()，标准菜单内容。然而，其中一个链接有一个子菜单，我特别想将这些配置分离到一个单独的文件中...app/componenets/links/links.routes.js。其代码为:

angular.module('app.links',[])
    .config(['$stateProvider',function($stateProvider){
        $stateProvider
            .state('index.links.first',{
                url:'links/first',
                views:{
                    'main@index':{
                        templateUrl:'app/components/links/first/first.view.html',
                        controller:'FirstLinkController as firstLinkCtrl'
                    }
                },
                resolve:{
                    loadFirstLinkModules:['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                name:'app.home',
                                serie:true,
                                files: [
                                    'app/components/links/first/first.module.js',
                                    'app/components/links/first/first.service.js',
                                    'app/components/links/first/first.controller.js'
                                ]
                            }
                        ]);
                    }]
                }
            });
    }]);

这里没什么太疯狂的。问题是这个 .config() 根本没有触发。我在其顶部放置了一个 console.log() 只是为了测试；即使文件本身正在加载，模块的 .config() 函数也永远不会运行。

基于UI Router documentation ，我应该可以使用多个模块来建立路由。是因为我懒加载文件吗？我有什么遗漏的吗？请帮忙!!

顺便说一句，如果有人想知道为什么我想将这些状态分开，那是因为它是为了扩展......假设这将用于具有大约 10,000 个状态的站点，这是为了组织更好地路由到这些州。考虑到这一背景，如果您推荐不同的方法，我会洗耳恭听!我对 Angular 还很陌生，欢迎任何和所有的智慧。

Answer 1

首先，将路由分离到多个文件中并没有什么问题。我在所有 Angular 应用程序中都成功做到了这一点。请在此处查看我的 Angular 入门应用程序: https://github.com/RyanWarner/angular-sprout .

我还不能发表评论，但是您是否记得需要您的 links 模块作为您的应用模块的依赖项？

UI 路由器文档中的示例:

angular.module('main', ['main.page1']);

其中main.page1相当于您调用links的模块。