Настройка UI-маршрутизатора для нескольких модулей

Я делаю проект в Angular 1.4, и я использую ui-router, я разделил свой проект на несколько подмодулей, там один "родительский" модуль (не уверен, что я использую концепция родительского и дочернего права) и несколько "дочерних" модулей.

У родителя есть маршруты для глобального входа и два основных меню каждой группы: группы, руководства, проекты; каждый из них имеет собственные "дочерние" модули, некоторые из них: руководства [Web, Mobile, Desktop], проекты [Business, Community]. Каждый модуль имеет свои собственные маршруты, и я хочу, чтобы он мог маршрутизировать приложение, хотя каждый модуль.

Основные маршруты:

/
/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-адресам... также хотелось бы получить некоторое мнение об этом подходе, была бы лучшая практика?

Ответ 1

Я создал plunkr для демонстрации ваших состояний. Я изменил код для использования шаблонов вместо templateUrl, но это не должно изменить то, что вы пытаетесь выяснить. Я сделал некоторые предположения относительно вашего макета на основе предоставленных ссылок. Если вы вытащите его во внешний просмотрщик, вы увидите URL-адреса, которые используются. Найдите его здесь: http://plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9?p=preview

URL-адреса в u-router используются как часть того, что указывает состояние. Поэтому, когда вы хотите/проекты/бизнес, у вас есть состояние, которое является дочерним проектом, у которого есть URL-адрес/бизнес. Что-то вроде:

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

Точечная нотация в определении состояния сообщает маршрутизатору ui, что это дочернее состояние проектов. Предоставляемое значение url добавляется к URL-адресу родительского состояния.

Я думаю, что ваша модульная стратегия прочная. Вам просто нужно обернуть голову о родительских дочерних отношениях, используемых в ui.router.