Konfiguruj UI-Router dla wielu modułów

Question

Tworzę projekt w Angular 1.4, i używam ui-routera, podzieliłem mój projekt na kilka podmodułów, jest jeden moduł "rodzica" (nie jestem pewien czy używam pojęcia rodziców i dziecka z prawej) i kilku modułów "dziecko".

"Rodzic" ma trasy dla globalnego logowania i dwóch głównych menu każdej grupy, grupy to: przewodniki, projekty; każdy z nich ma własne "dziecięce" moduły, niektóre z nich to: przewodniki [Web, Mobile, Desktop], projekty [Biznes, Społeczność]. Każdy moduł ma własne trasy, a ja chcę mieć możliwość kierowania aplikacją przez każdy moduł.

Główne trasy są:

/ 
/login 

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

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

Witryna ma jakoś samo pojęcie logowania SE, ludzie mogą mieć konto globalne lub jednego konta na określonego modułu.

co już próbowałem tak daleko, jeśli do trasy jako Doc mówi:

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' 
     }) 
}); 

Ale nie wiem, jak uzyskać dostęp do tych adresów URL ... również chciałby jakąś opinię na temat tego podejścia, czy byłaby lepsza praktyka?

Answer 1

Stworzyłem plunkr, aby pokazać twoje stany. Zmieniłem kod, aby używać szablonów zamiast szablonu template, ale to nie powinno zmieniać tego, co próbujesz wymyślić. Podjąłem pewne założenia dotyczące twojego układu na podstawie dostarczonych adresów URL. Jeśli wyskoczysz do zewnętrznej przeglądarki, zobaczysz używane adresy URL. Znajdź to tutaj: http://plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9?p=preview

Adresy URL w routerze ui są używane jako część tego, co określa stan. Więc kiedy chcesz/projekty/biznes masz stan, który jest dzieckiem projektów, które ma URL/biznes. Coś w rodzaju:

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

Notacja kropkowa w definicji stanu informuje router ui, że jest to stan potomny projektów. Podana wartość adresu URL jest dodawana do adresu URL nadrzędnego stanu.

Myślę, że twoja strategia modułu jest solidna. Trzeba tylko owinąć głowę wokół relacji nadrzędnego potomka używanych w ui.router.