如何使用 Angular UI Router 设置默认子视图 [英] How to set default child view with Angular UI Router

问题描述

假设我有以下 3 个 Angular UI 路由器状态:

Let's say I have the following 3 Angular UI Router states:

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

如果 adminCompanies 直接转换为，我如何告诉 Angular UI Router 转到 adminCompanies.list 状态?

If the adminCompanies is transitioned to directly, how can I tell Angular UI Router to go to the adminCompanies.list state instead?

理想情况下，我想要的是:

Ideally, what I'd like to is something like:

$stateProvider.when('adminCompanies', 'adminCompanies.list');

在我的代码中，我希望 $state.go('adminCompanies') 等同于 $state.go('adminCompanies.list')

In my code, I then want $state.go('adminCompanies') to be equivalent to $state.go('adminCompanies.list')

推荐答案

由于您的应用程序当前已设置，因此您不需要任何明确的逻辑.当子状态具有空的 url 属性时，它会在其父状态变为活动状态的同时变为活动状态.子状态的任何模板都插入到父状态模板提供的 ui-view 指令中.Angular UI 示例应用解决了这种类型的架构:当contacts 状态被导航到，它的 template 提供了导航布局以及其子状态的独特 ui-view；因为 contacts.list 状态有一个 "" 的 url 属性，所以在它的父状态 contacts 时会自动加载代码>被导航到.这记录在应用程序的评论中:

As your application is currently set up, you should not need any explicit logic for this. When a sub-state has an empty url property, it becomes active at the same time its parent state becomes active. Any template for the sub-state is inserted into the ui-view directive provided by the parent state's template. The Angular UI sample application addresses this type of architecture: when the contacts state is navigated to, its template provides the navigation layout as well as a distinct ui-view for its sub-states; because the contacts.list state has a url property of "", it is automatically loaded when its parent state, contacts is navigated to. This is documented in the application's comments:

使用空 url 意味着当导航到其父级的 url 时，此子状态将变为活动状态.子状态的 URL 会自动附加到其父状态的 URL.所以这个状态的 url 是 '/contacts'(因为 '/contacts' + '').

Using an empty url means that this child state will become active when its parent's url is navigated to. Urls of child states are automatically appended to the urls of their parent. So this state's url is '/contacts' (because '/contacts' + '').

现在，假设出于某种原因，您从不希望您的父 adminCompanies 状态变为活动状态.在这种情况下，您可以将该状态设为 抽象 状态如下:

Now, assuming for one reason or another that you never wanted your parent adminCompanies state to become active. In this case, you can make that state an abstract state like so:

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "/list",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

注意第三行添加的 abstract: true 和 /list 的显式状态 url for adminCompanies.list

Note the addition of the abstract: true addition on the 3rd line and the explicit state url of /list for adminCompanies.list

这告诉 Angular-UI 它应该将此状态视为不存在用于 URL 导航目的.但是，当您导航到子状态时，它仍将变为活动状态，因此它仍将使用您提供的 URL 作为子状态 URL 的前缀.但是，如果您尝试从另一个状态导航到它，它将表现为该状态不存在.因此，您还需要使用 $urlRouteProvider 添加对不匹配 URL 的处理.

This tells Angular-UI that it should treat this state as if doesn't exist for URL navigation purposes. It will still become active when you navigate to sub-states though, so it will still use the URL you provide to prefix the URL of sub-states. But if you try navigating to it from another state, it will act as if the state doesn't exist. For this reason, you will also need to add handling for unmatched URLs using $urlRouteProvider.

$urlRouteProvider 的基本用法可能如下所示:

A basic use of $urlRouteProvider might look like this:

$urlRouterProvider.otherwise("/")

这只是将所有对不存在状态的调用重定向到 URL 为/"的状态.这假设你有一个.然而，因为有人可能试图导航到列表视图，但他们直接导航到 /admin/companies，你可能应该有一个像这样的处理程序:

That just redirects all calls to non-existent states to the state with the URL of "/". This assumes you have one. However, because someone might be trying to navigate to the list view but they are navigating to /admin/companies directly, you should probably have a handler like this:

$urlRouterProvider.when("/admin/companies", "/admin/companies/list");

您使用哪一个取决于您的应用程序的架构，但对于您当前的需求，您似乎不必做任何事情.如果您的规范发生变化，抽象状态可能会派上用场.

Which one you use depends on the architecture of your application, but it seems that for your current needs you shouldn't have to do anything. If your specifications change, the abstract state might come in handy.

这篇关于如何使用 Angular UI Router 设置默认子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！