UI-Router: Предотвращение доступа к родительскому состоянию

Question

Я перехожу к UI-Router в качестве моего маршрутизатора приложений. Я хочу иметь вложенные состояния, как показано ниже:

$stateProvider 
.state('app', { 
     url: '/app', 
     template: ' <div ui-view></div>', 
     authenticate: true 
    }) 
.state('app.state1', { 
     url: '/state1', 
     templateUrl: 'app/state1.html', 
     controller: 'State1Ctrl', 
     controllerAs: 'state1', 
     authenticate: true 
    }) 
.state('app.state2', { 
     url: '/state2', 
     templateUrl: 'app/state2.html', 
     controller: 'State2Ctrl', 
     authenticate: true 
    }) 

Мой $state называется app является родителем других. Он состоит только из шаблона <div ui-view></div>. Он не должен быть доступен напрямую. Я имею в виду, если пользователь вводит /app в URL-адресе, он должен быть перенаправлен на `app.state1``

Как я могу запретить моим пользователям делать это?

Answer 1

Существует a working example

сделать ваше состояние abstract:

.state('app', { 
     url: '/app', 
     abstract: true, // here 
     template: ' <div ui-view></div>', 
     authenticate: true 
    }) 

И добавить некоторые стандартные переназначения:

$urlRouterProvider.when('/app', '/app/state1'); 
    $urlRouterProvider.otherwise('/app/state1'); 

Первые 2 ссылки ниже будет перенаправлять на «app.state1 '

<a href="#/app"> // will be redirected to state1 
<a href="#/app/state1"> 
<a href="#/app/state2"> 

doc about $stateProvider:

abstract(опционально)boolean

Абстрактное государство никогда не будет непосредственно активирована, но может предоставить по наследству свойства его общих детей заявляет.

Проверить это here