假设我有以下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状态?
adminCompanies
adminCompanies.list
理想情况下,我想要的是这样的:
$stateProvider.when('adminCompanies', 'adminCompanies.list');
然后,在我的代码中,我希望$ state.go(’adminCompanies’)等同于$ state.go(’adminCompanies.list’)
由于您的应用程序当前已设置,因此您不需要任何明确的逻辑。当子状态具有空url属性时,它在其父状态变为活动的同时变为活动状态。子状态的任何模板都将插入到ui- view父状态的模板提供的指令中。Angular UI 示例应用程序解决了这种类型的体系结构:当contacts状态被导航到时,其模板提供了导航布局以及ui- view其子状态的区别;因为contacts.list状态的url属性为"",所以在contacts导航到其父状态时会自动加载该状态。这记录在应用程序的注释中:
url
ui- view
contacts
contacts.list
""
使用空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
abstract: true
/list
这告诉Angular- UI,应该出于URL导航的目的将这种状态视为不存在。但是,当您导航到子状态时,它将仍然处于活动状态,因此它仍将使用您提供的URL为子状态的URL加上前缀。但是,如果您尝试从其他状态导航至该状态,则该状态就好像该状态不存在一样。因此,您还需要使用来添加对不匹配网址的处理$urlRouteProvider。
$urlRouteProvider
基本的使用$urlRouteProvider可能如下所示:
$urlRouterProvider.otherwise("/")
这只是将对不存在状态的所有调用重定向到URL为“ /”的状态。假设您有一个。但是,由于有人可能试图导航到列表视图,但又/admin/companies直接导航到列表视图,因此您可能应该具有以下处理程序:
/admin/companies
$urlRouterProvider.when("/admin/companies", "/admin/companies/list");
您使用哪一种取决于您的应用程序的体系结构,但似乎对于您当前的需求,您无需执行任何操作。如果您的规范发生更改,则抽象状态可能会派上用场。