13

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. これは可能ですか?代わりにネストされたビューである必要がありますか?

4

1 に答える 1