Требуется некоторое руководство по переносу моей конфигурации ngRoute в конфигурацию ui.router. В настоящее время у меня есть один основной шаблон (index.html), и он имеет ng-view, где все представления вводятся. Моя текущая конфигурация ngRoute выглядит следующим образом:
app.config(function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.when('/contact', {
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.when('/notification', {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
})
.otherwise({
redirectTo: '/login'
});
Теперь я хочу определить второе место в index.html, где я могу добавить некоторый контент представления - не вложенное представление, а скорее другое ng-view (или ui-view в терминологии ui-router). Исходный раздел ng-view является стандартным (в настоящее время только для /login и/contact), а новый - только для определенных маршрутов (в настоящее время это просто "/уведомление", но, возможно, другие в будущем). Позволяет вызывать новое "уведомление-просмотр" ui-view.
Я просмотрел большую часть документации ui-router и все еще не уверен, как перенести приведенное выше в новую конфигурацию ui.router. Может ли кто-нибудь заставить меня начать или указать на некоторые достойные примеры?
Обновление: Хорошо, вот где я. Я добавляю некоторые состояния и новый ui-view на мою страницу index.html. См. Ниже:
<div class="container">
<div id="header"></div>
<div data-ui-view></div>
<div data-ui-view="notification-view"></div>
</div>
Моя маршрутизация теперь:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url: '/notification',
views: {
"notification-view": {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
});
});
Это похоже на работу в большинстве случаев. Когда запускается url /notification, приложение направляется в NotificationCtrl и отображает содержимое ui-view в notification-view. Однако единственная проблема заключается в том, что содержимое ui в основном (неназванном) ui-view теряется. Я бы хотел, чтобы все, что уже было показано в главном ui-view, было нетронутым и предназначалось только для notification-view. Это возможно? Нужно ли это быть вложенным представлением?
