使用 Angular UI 路由器的嵌套路由

Question

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

基本上，我有一个标准的app.routes.js主菜单links。代码（修剪成有价值的和通用的）：

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

对于每个 link，我在链中都有其他几个 .state()，标准菜单内容。然而，其中一个 link 有一个子菜单，我特别想将这些配置分离到一个单独的文件中...... 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。

使用 Angular UI 路由器的嵌套路由

Nested routing with Angular UI Router

javascript

angularjs

angular-ui-router