Angularjs 为多个模块配置UI路由器

我正在Angular 1.4中制作一个项目，我正在使用ui路由器，我已经将我的项目分为几个子模块，有一个“父”模块（不确定我是否使用了父和子权限的概念）和几个“子”模块

“父级”有全局登录的路径，每个组有两个主菜单，这些组是：指南、项目；它们中的每一个都有自己的“子”模块，其中一些是：指南[网络、移动、桌面]、项目[商业、社区]。每个模块都有自己的路由，我想要的是能够通过每个模块路由应用程序

主要路线为：

/
/login

/guides
/guides/login
/guides/web
/guides/mobile
/guides/desktop

/projects
/projects/login
/projects/business
/projects/community

该网站有着与SE相同的登录概念，用户可以拥有一个全局帐户，也可以在特定模块上拥有一个单一帐户

到目前为止，我一直在尝试按照Doc所说的路线：

angular.module('main', ['main.guides', 'main.projects']).config(function ($stateProvider) {
    $stateProvider.
        state('main', {
            url: '/',
            templateUrl: './views/index.html',
            controller: 'IndexCtrl'
        }).
        state('login', {
            url: '/login',
            templateUrl: './views/login.html',
            controller: 'LoginCtrl'
        }).
        state('guides', {
            url: '/guides',
            templateUrl: './views/guides-menu.html',
            controller: 'GuidesCtrl'
        }).
        state('projects', {
            url: '/projects',
            templateUrl: './views/projects-menu.html',
            controller: 'ProjectsCtrl'
        });
});

angular.module('main.guides', []).config(function ($stateProvider) {
    $stateProvider.
        state('main.guides-login', {
            url: '/login',
            templateUrl: './views/login.html',
            controller: 'LoginCtrl'
        }).
        state('main.guides-menu', {
            url: '/login',
            templateUrl: './views/menu.html',
            controller: 'LoginCtrl'
        }).
        state('main.guides-web', {
            url: '/web',
            templateUrl: './views/web/list.html',
            controller: 'ListCtrl'
        }).
        state('main.guides-mobile', {
            url: '/web',
            templateUrl: './views/mobile/list.html',
            controller: 'ListCtrl'
        });
});

angular.module('main.projects', []).config(function ($stateProvider) {
    $stateProvider.
        state('main.projects-login', {
            url: '/login',
            templateUrl: './views/login.html',
            controller: 'LoginCtrl'
        }).
        state('main.projects-business', {
            url: '/business',
            templateUrl: './views/business/list.html',
            controller: 'ListCtrl'
        }).
        state('main.projects-menu', {
            url: '/business',
            templateUrl: './views/menu.html',
            controller: 'ListCtrl'
        }).
        state('main.projects-community', {
            url: '/business',
            templateUrl: './views/community/list.html',
            controller: 'ListCtrl'
        })
});

---

但我不知道如何访问这些URL。。。我还想了解一些关于这种方法的意见，有没有更好的做法？

我创建了一个plunkr来演示您的状态。我将代码改为使用模板而不是templateUrl，但这不应该改变您试图理解的内容。我根据提供的URL对您的布局做了一些假设。如果将其弹出到外部查看器中，则可以看到正在使用的URL。在这里找到它：

ui路由器中的URL用作指定状态的一部分。因此，当您想要/projects/business时，您的状态是url为/business的项目的子项目。比如：

    state('projects.business', {
        url: '/business',
        template: '<div> projects business</div>',
        controller: 'ListCtrl'
    })

state（'projects.business'{
url:“/business”，
模板：“项目业务”，
控制器：“ListCtrl”
})

状态定义中的点表示法告诉ui路由器这是项目的子状态。提供的url值将添加到父状态url

---

我认为你的模块策略是可靠的。您只需要了解ui.router中使用的父子关系

一个建议是进一步分解模块，将指南和项目状态移动到相应的子模块中。在同一模块中定义父级及其所有直接子级是有意义的。如果脚本作为单独的文件存在，我是否必须加载项目索引中的所有脚本，还是仅加载包含模块的脚本？除非您使用其他机制加载脚本，否则您需要加载索引中的所有脚本动态地像requirejs一样。我通常只是将它们加载到索引中，并使用一个小型固定工具来丑化和最小化部署代码。注意，您的模板并非如此。