从ngRoute迁移到ui-router

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),而新部分仅适用于特定路由(当前只是'/ notification',但未来可能是其他路由).让我们调用新的ui-view'notification-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触发url时,应用程序将路由到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