Угловые UI-Router childs

Question

У меня есть app.config с UI-Router. У него есть страница входа с его контроллером, recoverLogin, и я хочу поместить шаблон с нижним колонтитулом, заголовком и другими материалами с новыми состояниями, которые могут быть загружены в шаблон (в especificplace).

Мой модуль:

var app = angular.module("app", [ 
    "ui.router", 
    "pascalprecht.translate" 
]); 

Мои маршруты;

app.config(function($stateProvider, $urlRouterProvider) 
{ 
    $stateProvider 
    .state("login", { 
     url: "/login", 
     templateUrl: "views/accessControl/login.html", 
     controller: "loginCtrl" 
    }); 
    $stateProvider 
    .state("recoverLogin", { 
     url: "/recoverLogin", 
     templateUrl: "views/accessControl/recoverLogin.html", 
     controller: "recoverLoginCtrl" 
    }); 
    $stateProvider 
    .state("template", { 
     url: "/template", 
     templateUrl: "views/templates/template.html", 
     controller: "templateCtrl" 
    }) 
    .state("template.dashboard", { 
     url: "/dashboard", 
     templateUrl: "views/dashboard/dashboard.html", 
     controller: "dashboardCtrl" 
    }) 
    $urlRouterProvider.otherwise("login"); 
}) 

у меня в индексе <ui-view></ui-view> на месте нагрузок и другой <ui-view></ui-view> в template.html междунар он место, где я хочу, чтобы загрузить больше вещей, как dashboard.html, но это не работает. он загружает dashboard.html без шаблона, созданного в template.html. Я создал много документации, которая не работает для меня. Есть идеи?

Здесь есть plunker пример идеи: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview

Answer 1

Существует updated plunker и работает plunker.

Шаблона состояния mainTemplate теперь смотрит, как это:

place for main: 
<div ui-view="main"></div> 


place for other: 
<div ui-view="other"></div> 

поэтому он имеет два (может быть больше) мест для более вещей. И это состояние переопределены:

.state("mainTemplate.dashboard", { 
    name: "main", 
    url: "/dashboard", 
    views: { 
     'main' : { 
     templateUrl: "dashboard.html", 
     controller: "dashboardCtrl" 
     }, 
     'other' : { 
     template: "<h2>other view</h2>", 
     } 

    } 
}); 

Что мы можем увидеть это views : {} объект используется для определенного множественного контента для более целей. Читайте про то, что более подробно здесь:

• Angular UI Router - Nested States with multiple layouts
• Nested states or views for layout with leftbar in ui-router?

играть или наблюдать изменения here