Angular URL-адрес родителя ui-router, установленный в/

Использование ui-router и установка родительского состояния url на / приводит к тому, что мой url выглядит как localhost:8000/#//child при просмотре дочерней страницы. Мне нужно всего лишь один / между хэшем и дочерним элементом.

Я попытался оставить пустой URL-адрес родительского состояния, но тогда ui-sref не будет ссылаться на родительское состояние при использовании привязки. Кто-нибудь получил решение о том, что у него есть неименованный родительский URL-адрес корневого уровня?

app.config

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");

$stateProvider
  .state("main", {
    url: "/",
    templateUrl: 'sites/main/main.html',
    controller : 'MainController',
    resolve: {
      items: function(srvMenu) {
          return srvMenu.getNav();
      }
  }

 })

});

child.config

emergency.config(function($stateProvider) { 
$stateProvider
    .state("main.emergency", {
      url: "/emergency",
      templateUrl: 'sites/emergency/emergency_menu.html',
      controller : 'EmenuController',
      resolve: {
          emenu: function(srvEmergency) {
              return srvEmergency.getMenu();
          }
      }

    })

    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'sites/emergency/emergency_detail.html',
    })
});

Ответы

Ответ 1

ui-router имеет решение (почти) для чего угодно. Существует рабочий плункер. Функция, которую мы будем использовать, называется: Абсолютные маршруты (^)

Итак, начнем с требования, чтобы иметь эти URL-маршруты:

domain/#/                             -- root for main
domain/#/emergency/                   -- main.emergency
domain/#/emergency/detail             -- main.emergency.detail

Что должно работать при использовании этого состояния ui-sref:

<ul>
    <li><a ui-sref="main">Main</a></li>
    <li><a ui-sref="main.emergency">Emergency</a></li>
    <li><a ui-sref="main.emergency.detail">Detail</a></li>
</ul>

Теперь трюк:

  • В корневом (первом) состоянии должно использоваться url: "/", чтобы иметь уникальную идентификацию
  • но следующее состояние может снова начать свое определение с корня: с помощью этого параметра:
    url: "^/..."

Вот конфигурация состояния, позволяющая получить желаемые результаты

  $stateProvider
    // root with '/'
    .state("main", {
      url: "/",
      templateUrl: 'main.tpl.html',
    })
    // here we start again from the root '/emergency'
    .state("main.emergency", {
      url: "^/emergency",
      templateUrl: 'emergency_menu.tpl.html',
    })
    // parent and child '/emergency/detail
    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'emergency_detail.tpl.html',
    });

И вот документация:

Абсолютные маршруты (^)

... и рабочий plunker...