为多个模块配置UI路由器

I'm making a project in Angular 1.4, and i'm using ui-router, I have split my project in several sub-modules, there's one 'parent' module (not sure if i'm using the concept of parent and child right) and several 'child' modules.

我正在Angular 1.4中创建一个项目，我正在使用ui-router，我将项目分成几个子模块，有一个“父”模块（不确定我是否使用了父母和孩子的概念）右）和几个'儿童'模块。

The 'parent' has routes for the global login, and the two main menus of each group, the groups are: guides, projects; each one of them has it's own 'child' modules some of them are: guides[Web, Mobile, Desktop], projects[Business, Community]. Each module has it's own routes, and what i want is to be able to route the app though each module.

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

The main routes are:

主要路线是：

/
/login

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

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

The site has somehow same login concept of SE, people can have a global account, or a single account on a specific module.

该网站具有与SE相同的登录概念，人们可以在特定模块上拥有全局帐户或单个帐户。

What i've tried so far if to make the routes as Doc says:

到目前为止我尝试过如果像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'
        })
});

But don't know how to access to those urls... also would like some opinion about this approach, would there be a better practice?

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

1 个解决方案

#1

I created a plunkr to demo your states. I altered the code to use templates instead of templateUrl but that shouldn't change what you are trying to figure out. I made some assumptions about your layout based on the urls provided. If you pop it out into the external viewer you can see the urls being used. Find it here: http://plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9?p=preview

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

Urls in the ui-router are used as part of what specifies the state. So when you want /projects/business you have a state that is a child of projects that has a url of /business. Something like:

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

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

The dot notation in the state definition tells the ui router that this is child state of projects. The url value provided is added to the parent state url.

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

I think your module strategy is solid. You just need to wrap your head about the parent child relationships used in the ui.router.

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

#1