ngRoute 構成を ui.router 構成に移行することに関して、いくつかのガイダンスが必要です。現在、1 つのメイン テンプレート (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 の 2 番目の場所を定義したいと考えています。ネストされたビューではなく、別の ng-view (または ui-router 用語の ui-view) です。元の ng-view セクションはデフォルトのもの (現在は /login と /contact のみ) であり、新しいものは特定のルートのみです (現在は '/notification' だけですが、将来的には他のものになる可能性があります)。新しい ui-view を「notification-view」と呼びましょう。
私は多くの ui-router ドキュメントを調べましたが、上記を新しい ui.router 構成に移行する方法がまだわかりません。誰かが私を始めさせたり、いくつかの適切な例を教えてくれませんか?
更新: わかりました、ここにいます。index.html ページにいくつかの状態と新しい ui ビューを追加しました。下記参照:
<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 ビュー コンテンツを にレンダリングしnotification-view
ます。ただし、唯一の問題は、メイン (名前のない) ui ビューの ui コンテンツが失われることです。メインの ui-view で既にレンダリングされているものはそのままにして、notification-view
. これは可能ですか?代わりにネストされたビューである必要がありますか?