为多个模块配置UI路由器

Question

我正在Angular 1.4中创建一个项目,我正在使用ui-router,我已将我的项目分成几个子模块,有一个"父"模块(不确定我是否使用了父母和孩子的概念)右)和几个'儿童'模块.

'parent'具有全局登录的路由,以及每个组的两个主菜单,组是:指南,项目; 他们每个人都有自己的"孩子"模块,其中一些是:指南[Web,移动,桌面],项目[商业,社区].每个模块都有自己的路由,我想要的是能够通过每个模块路由应用程序.

主要路线是:

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

但是不知道如何访问这些网址...也想对这种方法有一些看法,会有更好的做法吗？

Answer 1

我创建了一个plunkr来演示你的状态.我将代码更改为使用模板而不是templateUrl,但这不应该改变您想要弄清楚的内容.我根据提供的网址对您的布局做了一些假设.如果将其弹出到外部查看器中,您可以看到正在使用的URL.在这里找到它:http: //plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9？p = preview

ui-router中的URL用作指定状态的一部分.因此,当您需要/ projects/business时,您拥有的状态是具有/ business业务的项目的子项.就像是:

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

状态定义中的点符号告诉ui路由器这是项目的子状态.提供的url值将添加到父状态url.

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