从ngRoute迁移到ui-router

Needs some guidance with respect to migrating my ngRoute configuration to a ui.router configuration. Currently I have one main template (index.html) and it has an ng-view where all views are injected. My current ngRoute config is as follows:

需要一些关于将ngRoute配置迁移到ui的指导。路由器配置。目前我有一个主模板(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'
    });

I now want to define a second place in index.html where I can inject some view content - not a nested view, but rather another ng-view (or ui-view in ui-router terminology). The original ng-view section is the default one (currently just for /login and /contact), and the new one is just for specific routes (currently just '/notification' but maybe others in the future). Lets call the new ui-view 'notification-view'.

现在我想在index中定义第二个位置。在html中，我可以注入一些视图内容——不是嵌套的视图，而是另一个ng-view(或者ui-router术语中的ui-view)。原始的ng-view部分是默认的部分(当前仅用于/login和/contact)，而新的部分仅用于特定的路由(当前仅用于'/notification'，但将来可能用于其他路由)。让我们调用新的ui-view“notificationview”。

I've gone through much of the ui-router documentation and still am unsure of how to migrate the above to the new ui.router config. Can someone get me started or point me toward some decent examples?

我已经阅读了许多ui-router文档，但仍然不确定如何将上面的内容迁移到新的ui。路由器配置。有人能让我开始或指向一些像样的例子吗?

Update: Ok, here is where I am. I've adding some states and a new ui-view to my index.html page. See below:

更新:好的，我在这里。我在索引中添加了一些状态和一个新的ui视图。html页面。见下文:

    <div class="container">     
        <div id="header"></div>
        <div data-ui-view></div>
        <div data-ui-view="notification-view"></div>
    </div>

My routing is now:

我现在的路由:

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

This seems to work ok for the most part. When the url /notification is triggered, the app is routed to the NotificationCtrl and renders ui-view content into the notification-view. However the only problem is that the ui content in the main (unnamed) ui-view is lost. I would like whatever is already rendered in the main ui-view to be untouched, and only target the notification-view. Is this possible? Does it have to instead be a nested-view?

这在大多数情况下都是可行的。当url /通知被触发时，应用程序被路由到NotificationCtrl并将ui-view内容呈现到notificationview中。然而，唯一的问题是main(未命名)ui视图中的ui内容丢失了。我希望主ui视图中已经呈现的内容不被修改，只针对notificationview。这是可能的吗?它是否必须是一个nested视图?

1 个解决方案

#1

When using ui.router, you should think in terms of states rather than routes. So instead of the $routeProvider you instead inject $stateProvider, plan out various states and work from there . So from your example above, we convert it to:

当使用ui。路由器，你应该考虑的是状态而不是路由。所以不是$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'
    });
}

There's alot of methods for adding a "sub-view" to uirouter, one method is by adding a child state.

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

Also as $stateProvider doesnt provide a default state handler, you will also need to inject in $urlRouterProvider. This is a provider that also comes with ui-router that is tasked with the responsibility of watching $location for changes.

同样，由于$stateProvider没有提供默认的状态处理程序，您还需要注入$urlRouterProvider。这是一个提供ui-路由器的供应商，它的任务是监视$location的更改。

The thing with ui-router is that you won't see a huge difference compared to the built-in route provider and ease of use it brings until you start using sub-states and stacked-states.

使用ui-router时，您不会看到与内置路由提供程序相比的巨大差异，而且在开始使用子状态和断态之前，它带来的使用方便。

In your example above, ui.router wouldnt know what templte to use tor the ui-view and thus leaves it empty. You can give it a template and thus becomes:

在上面的例子中，ui。路由器不知道使用ui-view的templte是什么，因此它是空的。你可以给它一个模板，从而变成:

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

But from what I'm getting you want the login and contact to have the notification in it. So ideally you'd create a notification child state for each, as right now there is now way to declare wildcard or multiple parents for a child-state. Hopefully when v1.0 comes out there'll be support for this use-case already.

但是从我得到的信息来看，你想要登录和联系人在里面有通知。所以理想情况下，您应该为每个子状态创建一个通知子状态，因为现在有一种方法可以为一个子状态声明通配符或多个父状态。希望当v1.0发布时，这个用例已经得到了支持。

Below is a link from the docs that will get you upto speed:

以下是来自文档的链接，可以让你快速阅读:

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

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

#1

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