Question

需要一些有关将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-router术语中的ui-view）。原始ng-view部分是默认部分（目前仅适用于/ login和/ contact），而新部分仅适用于特定路由（目前只是＆＃39; / notification＆＃39;但未来可能是其他路由）。让我们调用新的ui-view＆＃39; notification-view＆＃39;。

我已经浏览了大部分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视图中已呈现的任何内容都不受影响，并且仅针对notification-view。这可能吗？是否必须是嵌套视图？

Answer 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不会知道使用ui-view的templte，因此将其留空。你可以给它一个模板，然后变成：

...
.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

从ngRoute迁移到ui-router

1 个答案: