angularjs - 从 ngRoute 迁移到 ui-router

Question

需要一些关于将我的 ngRoute 配置迁移到 ui.router 配置的指导。目前我有一个主模板(index.html)，它有一个注入(inject)所有 View 的 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 中定义第二个位置，我可以在其中注入(inject)一些 View 内容——不是嵌套 View ，而是另一个 ng-view(或 ui-router 术语中的 ui-view)。原始的 ng-view 部分是默认部分(目前仅用于/login 和/contact)，而新部分仅用于特定路由(当前仅 '/notification' 但将来可能还有其他)。让我们将新的 ui-view 称为“通知 View ”。

我已经阅读了大部分 ui-router 文档，但仍然不确定如何将上述内容迁移到新的 ui.router 配置。有人可以让我开始或指出一些像样的例子吗？

更新:
好的，这就是我所在的位置。我在 index.html 页面中添加了一些状态和新的 ui View 。见下文:

    <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'              
        }
      }
    });
});

这似乎在大多数情况下都可以正常工作。当网址 /notification被触发，应用程序被路由到 NotificationCtrl 并将 ui-view 内容呈现到 notification-view .然而，唯一的问题是主(未命名)ui View 中的 ui 内容丢失了。我希望主 ui View 中已经呈现的任何内容都保持不变，并且只针对 notification-view .这可能吗？它是否必须改为嵌套 View ？

Answer 1

使用 ui.router 时，应该考虑 状态 而不是路线。所以而不是 $routeProvider您改为注入(inject) $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 添加“ subview ”的方法有很多，其中一种方法是添加子状态。

$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不提供默认状态处理程序，您还需要注入(inject) $urlRouterProvider .这是一个提供程序，它还附带 ui-router，负责观看 $location。进行更改。

使用 ui-router 的事情是，在您开始使用子状态和堆叠状态之前，您不会看到与内置路由提供程序和易用性相比的巨大差异。

在上面的示例中， ui.router 不知道在 ui-view 中使用什么模板，因此将其留空。你可以给它一个模板，从而变成:

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

但是从我得到的你想要的 登录 和 联系 有通知。所以理想情况下，你会创建一个 通知 每个子状态，因为现在可以为子状态声明通配符或多个父状态。希望当 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