如何使用 Angular UI Router 设置默认子视图答案

【问题标题】：How to set default child view with Angular UI Router如何使用 Angular UI Router 设置默认子视图
【发布时间】：2014-02-23 21:51:58
【问题描述】：

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

$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 状态？

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

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

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

【问题讨论】：

我猜应该是$location.path('/admin/companies')。
adminCompanies 状态下的模板是否包含ui-view 指令？
@DavidAntaramian 是的。我经常重复使用基本的
，这就是 Templates.viewsContainer() 的用途。

标签： javascript angularjs parent-child angular-ui

【解决方案1】：

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

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

现在，假设出于某种原因，您从不希望您的父 adminCompanies 状态变为活动状态。在这种情况下，您可以将该状态设置为 abstract 状态，如下所示：

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

注意第 3 行添加的 abstract: true 以及 adminCompanies.list 的显式状态 url /list

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

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

$urlRouterProvider.otherwise("/")

这只是将所有对不存在状态的调用重定向到 URL 为“/”的状态。这假设你有一个。但是，由于有人可能试图导航到列表视图，但他们直接导航到 /admin/companies，您可能应该有这样的处理程序：

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

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

【讨论】：

【解决方案2】：

您还可以使用ui-router-default - 通过设置abstract: ".defaultChild" 在父状态中定义默认子状态的模块。

这样做的好处是能够使用ui-sref="parent" 和$state.go("parent");（在动态创建导航栏时这对我来说很重要）。

注意：这和大卫的解决方案都只在父状态是抽象的情况下才有效 - 即如果没有孩子处于活动状态，父母就不能处于活动状态 - 当我们想要有一个“默认”子视图时应该是这种情况。

（另见ui-router团队相关讨论here。）

【讨论】：

【解决方案3】：

在 1.0.0alpha0 版本中，他们终于实现了！不是抽象状态的子节点，新的 $transitionsProvider，您可以在其中定义 onBefore 钩子。您可以根据状态选项更改行为。

例如，您可以更改“抽象”参数行为：

 $transitionsProvider.onBefore({
    to: state => !!state.abstract
  }, ($transition$, $state) => {
    if (angular.isString($transition.to().abstract)) {
      return $state.target($transition.to().abstract);
    }
  });

并像这样使用它：

  abstract: 'abstract2.foo',  //use not boolean but exact child state

code example

取自： ui-router: Default child for abstract state

【讨论】：