Перенести с ngRoute на ui-router

Требуется некоторое руководство по переносу моей конфигурации 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. Это возможно? Нужно ли это быть вложенным представлением?

Ответы

Ответ 1

При использовании ui.router вы должны думать о состояниях, а не о маршрутах. Поэтому вместо $routeProvider вы вместо этого вводите $stateProvider, планируете различные состояния и работаете оттуда. Итак, из вашего примера выше, мы преобразуем его в:

app.config(function ($stateProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $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',
        templateUrl: 'app/views/notification.html',
        controller: 'NotificationCtrl'
    });
}

Существует много способов добавления "подвид" к uirouter, один метод - путем добавления дочернего состояния.

$stateProvider
        .state('login', {
            url:'/login',
            templateUrl: 'app/views/login.html',
            controller: 'LoginCtrl'
        })
          .state('login.error', {
            url:'/login',
            templateUrl: 'app/views/login-error-subview.html',
            controller: 'LoginErrorCtrl'
          })

Также как $stateProvider не предоставляет обработчик состояния по умолчанию, вам также нужно ввести в $urlRouterProvider. Это поставщик, который также поставляется с ui-router, на который возложена ответственность за просмотр $location для изменений.

Вещь с ui-router заключается в том, что вы не увидите огромной разницы по сравнению с встроенным провайдером маршрутов и простотой использования, которую она приносит, пока вы не начнете использовать под-состояния и штабелированные состояния.

В приведенном выше примере ui.router не знает, какой templte использовать u-view и, таким образом, оставляет его пустым. Вы можете создать шаблон и таким образом:

...
.state('notification', {
      url: '/notification',
      views: {
        '':{
            templateUrl: 'app/views/notification-main.html',
            controller: ''              
        }
        'notification-view': {
            templateUrl: 'app/views/notification.html',
            controller: 'NotificationCtrl'              
        }
      }
...

Но из того, что я получаю, вы хотите, чтобы login и контакт имел в нем уведомление. Поэтому в идеале вы создадите дочернее состояние уведомление для каждого, так как сейчас есть способ объявить шаблон или несколько родителей для дочернего состояния. Надеюсь, когда выйдет v1.0, уже будет поддержка этого прецедента.

Ниже приведена ссылка из документов, которые помогут вам быстро:

https://github.com/angular-ui/ui-router/wiki/URL-Routing

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views