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中使用的父子关系。

为多个模块配置UI路由器

1 个答案: