Угловая UI Router Абстрактные шаблон

Question

У меня есть рабочее приложение с все работает со структурой, как это:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-2"> 
     <!-- alot of repeated html used by all the states here --> 
    </div> 
    <div class="col-md-8"> 
     <!-- the unique html specific to the state goes here --> 
    </div> 
    </div> 
</div> 

и конфигурации маршрутизатора, как этот

$stateProvider 
 
    .state('dashboard', { 
 
    url: '/dashboard', 
 
    templateUrl: './partials/dashboard.html' 
 
    }) 
 
    .state('applications', { 
 
    url: '/applications', 
 
    templateUrl: './partials/applications.html' 
 
    }) 
 
    .state('server', { 
 
    url: '/server', 
 
    templateUrl: './partials/server.html' 
 
    })

Проблема в том, что здесь много повторений n html-кода. Как создать интерфейс, на который наследуются все состояния, чтобы сосредоточиться на uniques html состояния.

Answer 1

Вы можете использовать абстрактное состояние, f.e. base:

.state('base', { 
    url: '', 
    templateUrl: 'path/to/layout.html', // here you should declare named ui-views, f.e. named content 
    abstract: true 
}) 
.state('base.dashboard', { 
    url: '/dashboard', 
    views: { 
    content: { 
     templateUrl: "/path/to/dashboard/content.html" 
    } 
    } 
}) 
// the rest of the states goes the same below. 
... 

Надеюсь, что это помогло.

Для получения дополнительной информации см. here.