angularjs - ui-router - можем ли мы предварительно загрузить вложенное состояние?

Question

у меня есть это в моем app.js:

$stateProvider 
    .state('actionplans', { 
     url: "/actionplans", 
     templateUrl: "pages/actionplans.html", 
     //controller : 'ActionplansCtrl' 
    }) 
    .state('actionplans.planning', { 
     url: "/planning", 
     templateUrl: "pages/actionplans.planning.html", 
     //controller : 'ActionplansCtrl' 
    }) 
    .state('actionplans.summary', { 
     url: "/summary", 
     templateUrl: "pages/actionplans.summary.html", 
     //controller : 'ActionplansCtrl' 
    }) 

Как я могу по умолчанию нагрузки гнездо действия вида 'actionplans.summary.html' при вызове actionplans.html?

Answer 1

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

Путь, который

1. нагрузки некоторый вида внутри родителя - и остаться на родителях
2. позволяет ребенку изменить его при переходе к ребенку

называется Multiple named views:

.state('actionplans', { 
    url: "/actionplans", 
    views: { 
    '': { 
     templateUrl: "pages/actionplans.html", 
     //controller : 'ActionplansCtrl' 
    }, 
    '@actionplans': { 
     templateUrl: "pages/actionplans.summary.html", 
     //controller : 'ActionplansCtrl' 
    } 
    } 
}) 
.state('actionplans.planning', { 
    url: "/planning", 
    templateUrl: "pages/actionplans.planning.html", 
    //controller : 'ActionplansCtrl' 
}) 
.state('actionplans.summary', { 
    url: "/summary", 
    templateUrl: "pages/actionplans.summary.html", 
    //controller : 'ActionplansCtrl' 
}) 

Что мы сделали выше, это то, что мы использовали views : {} объект для определения двух видов. Сначала нацеливается на index.html («'), второй нацеливается на эту цель представления состояния для детей (« @actionplans »).

views: { 
    '': { // index.html  
     ...  
    }, 
    '@actionplans': { // this targets the unnamed view for children 

Подробнее о absolute names here

Другим способа, чтобы определить переназначение некоторого по умолчанию, но это будет отключить родительское состояние как реальная цель (например, здесь Redirect a state to default substate with UI-Router in AngularJS)

Answer 2

Здесь обсудить AngularJS маршрутизации с помощью UI-Router, вы получите достаточное представление о вложенном представлении и множественном представлении.

https://scotch.io/tutorials/angular-routing-using-ui-router

Answer 3

Я нашел простое решение here.

$urlRouterProvider.when('/actionplans', '/actionplans/summary');//<-- Add in this line 
    $stateProvider 
    .state('actionplans', { 
     url: "/actionplans", 
     abstract: true,/// <-- Add in this line 
     templateUrl: "pages/actionplans.html", 
    }) 
    .state('actionplans.planning', { 
     url: "/planning", 
     templateUrl: "pages/actionplans.planning.html", 
    }) 
    .state('actionplans.summary', { 
     url: "/summary", 
     templateUrl: "pages/actionplans.summary.html", 
    }) 

Это загрузит вид гнезда actionplans.summary.html по умолчанию при вызове /actionplans. Мое извинение, что я не сделал этого яснее в своем вопросе, поэтому я публикую ответ здесь, надеюсь, это поможет кому-то другому с похожим сценарием.