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

假设我有以下3种状态：

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

---

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

由于您的应用程序当前已设置，因此不需要任何显式逻辑。当子状态具有空的

url

属性时，它将在其父状态变为活动状态的同时变为活动状态。子状态的任何模板都将插入父状态模板提供的

ui视图

指令中。Angular UI解决了这种类型的架构：当导航到

联系人

状态时，其提供了导航布局以及一个独特的

UI视图

，用于其子状态；由于

contacts.list

状态具有

url

属性

”

，因此当导航到其父状态

contacts

时，会自动加载该属性。这记录在应用程序的：

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

现在，假设出于这样或那样的原因，您从未希望您的父公司

AdminCompanys

状态变为活动状态。在这种情况下，可以将该状态设置为如下状态：

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

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

/admin/companys

，因此您可能应该有这样一个处理程序：

$urlRouterProvider.otherwise("/")

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

您使用哪一种取决于应用程序的体系结构，但对于您当前的需求，您似乎不需要做任何事情。如果您的规范发生更改，抽象状态可能会派上用场。

您还可以使用-一个模块，通过设置

抽象：“.defaultChild”

在父状态中定义默认子状态

这样做的好处是能够使用

ui sref=“parent”

和

$state.go（“parent”）（在动态创建导航栏时，这对我很重要）

注意：只有在父视图是抽象的情况下，此解决方案和David的解决方案才有效——即，如果子视图不处于活动状态，父视图就不能处于活动状态——这应该是我们希望具有“默认”子视图的情况

（另请参见ui路由器团队的相关讨论。）
在版本1.0.0alpha0中，他们最终使之成为可能！非抽象状态的子级，新的$transitionProvider，您可以在其中定义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


摘自：
我猜应该是
$location.path（'/admin/companys'）
。在
adminCompanies
状态中的模板是否包含
ui视图
指令？@DavidAntaramian是。我经常重复使用basic，这就是
Templates.viewsContainer（）
的用途。
  abstract: 'abstract2.foo',  //use not boolean but exact child state