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

Question

假设我有以下3个Angular UI Router状态：

$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’）

Answer 1

由于您的应用程序当前已设置，因此您不需要任何明确的html" target="_blank">逻辑。当子状态具有空url属性时，它在其父状态变为活动的同时变为活动状态。子状态的任何模板都将插入到ui- view父状态的模板提供的指令中。Angular UI 示例应用程序解决了这种类型的体系结构：当contacts状态被导航到时，其模板提供了导航布局以及ui- view其子状态的区别；因为contacts.list状态的url属性为""，所以在contacts导航到其父状态时会自动加载该状态。这记录在应用程序的注释中：

使用空URL表示此子状态在导航到其父URL时将变为活动状态。子状态的网址会自动附加到其父目录的网址中。因此，此状态的url为’/
contacts’（因为’/ contacts’+”）。

现在，假设出于某种原因，您 从未 希望您的父adminCompanies国家成为活跃国家。在这种情况下，您可以使该状态成为
抽象
状态，如下所示：

$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第三行的加法和/listfor 的显式状态urladminCompanies.list

这告诉Angular-
UI，应该出于URL导航的目的将这种状态视为不存在。但是，当您导航到子状态时，它将仍然处于活动状态，因此它仍将使用您提供的URL为子状态的URL加上前缀。但是，如果您尝试从其他状态导航至该状态，则该状态就好像该状态不存在一样。因此，您还需要使用来添加对不匹配网址的处理$urlRouteProvider。

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

$urlRouterProvider.otherwise("/")

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

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

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