How does Angularjs large ui route routing properly work?

Question

JavaScript

Hello. The essence of the question is as follows:
There is a project that can be divided into 3 parts of the site.
1. The main pages of the site (like: contacts, projects, about us, etc.);
With its navigation, respectively;
2. User authentication (login, recovery, registration)
With a completely different design;
3. A personal account that looks like the main one, but with its own content and navigation.
There can be a huge number of page hierarchies in it, but at the same time we can return to the main site and look at its pages. And again, when you click on the "Personal Account", we go to the functionality of the lk, again with its navigation, etc.
The question is, how can I correctly form such a routing on angularjs, I use ui router. Connection to each page of some additional views does not roll, tk. nesting can go further and further. Connecting pages as views would be better used there.
The essence of the problem may not be clear, I think. But otherwise I can not explain in words.
Divided the site into main, profile and auth; But it turns out to be a complete mess and not a beautiful path of the main page, like site. ru/main/home or site .ru/home.
I would like to have an adequate path site.ru/
What is at the moment.

.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:
There is an option to split the site into modules (mainApp, profileApp, authApp). But how to do it right and what problems can arise from this?
I will be glad to any advice, examples, etc.

Answer 1

You are your own evil Pinocchio.
In short, your whole far-fetched problem is solved by child states (you are using ui-router).
You divide the application into modules, and in each module you do your own routing, specifying the name of the parent state in the "parent" field of the child states. Thus, you will not have modules (physically) endlessly nested into each other, when as addresses can be done in the form: site.ru/profile/history/operations, etc., etc. - as far as your imagination is enough .
Examples here: https://github.com/angular-ui/ui-router/wiki/Neste...
By the way, Angular2 has such functionality out of the box + differentiation of access rights to pages is made many times easier.