Как организация правильно работу большого роутинга ui route Angularjs?

Всем привет. Суть вопроса такова:
Есть проект, который, можно разделить пока на 3 части сайта.
1. Основные страницы сайта (типо: контакты, проекты, о нас и т.д.);
Со своей навигацией соответственно;
2. Аутентификация пользователя (вход, восстановление, регистрация)
С абсолютно другим дизайном;
3. Личный кабинет, который выглядит как и основа, но со своим контентом и своей навигацией.
Иерархии страниц в нем может быть огромной количество, но при этом мы можем вернуться к основному сайту и посмотреть его страницы. И опять же при клике на "Личный кабинет", мы уходим на функционал лк, с опять же его навигацией и т.д.

Вопрос в том, как же все таки правильно сформировать такой роутинг на angularjs, юзаю ui router. Подключение к каждой страницу каких то дополнительных вьюх не катит, т.к. вложенности могут уходить все далее и далее. Подключение страниц как вьюх, будет лучше использоваться там.
Суть проблемы может быть не понятна, я думаю. Но по другому не могу объяснить на словах.

Разделил сайта на main, profile и auth; Но получается полная каша и не красивый путь главной страницы, типо site. ru/main/home или site .ru/home.
Хотелось бы иметь адекватный путь site.ru/
Что есть на данный момент.
.state('auth', {
			url: "/auth",
			templateUrl: 'tpl/auth/index.html',
			abstract: true,
			authenticated: false
		})
		.state('auth.login', {
			url: "/login",
			authenticated: false,
			data: {
				pageTitle: 'Авторизация'
			},
			views: {
				'auth': {
					templateUrl: 'tpl/auth/login.html',
					controller: 'loginCtrl'
				}
			}
		})
		.state('auth.registration', {
			url: "/registration",
			authenticated: false,
			data: {
				pageTitle: 'Регистрация пользователя'
			},
			views: {
				'auth': {
					templateUrl: 'tpl/auth/registration.html'
				}
			},
		})
		.state('main', {
			url: "",
			templateUrl: 'tpl/main/index.html',
			controller: 'homeCtrl',
			abstract: true,
			authenticated: false
		})
		.state('main.home', {
			url: "/home",
			controller: 'homeCtrl',
			authenticated: false,
			views: {
				'main': {
					templateUrl: 'tpl/main/home.html'
				}
			}
		})
		.state('main.contacts', {
			url: "/contacts",
			authenticated: false,
			views: {
				'main': {
					templateUrl: 'tpl/main/contacts.html'
				}
			}
		})


re:
Есть вариант разделения сайта на модули (mainApp, profileApp, authApp). Но как это правильно сделать и какие от этого могут возникнуть проблемы?
Буду рад любым советам, примерам и т.д.
  • Вопрос задан
  • 1262 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Beltoev
Живу в своё удовольствие
Вы сам себе злой Буратино.

Если коротко, то вся ваша надуманная проблема решается дочерними состояниями (вы же ui-router используете).

Разбиваете приложение на модули, а в каждом модуле делаете свою маршрутизацию, указывая у дочерних состояний в поле "parent" имя родительского состояния. Таким образом у вас не будет бесконечно вложенных друг в друга модулей (физически), когда как адреса можно будет делать в виде: site.ru/profile/history/operations и т. д. и т. п. - насколько у вас хватит фантазии.

Примеры тут: https://github.com/angular-ui/ui-router/wiki/Neste...

К слову, в Angular2 такой функционал есть из коробки + разграничение прав доступа к страницам делается в разы проще.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы