使用AngularJS的ui-router模块可以轻松地创建复杂的前端路由，实现更灵活的页面导航和状态管理。在使用ui-router时，有时我们需要获取给定状态的子状态列表，以便在页面中动态显示导航菜单或其他相关内容。本文将介绍如何使用ui-router来获取子状态列表，并提供一个案例代码来帮助读者更好地理解。

javascript
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      template: '
Welcome to the home page!
'
    })
    .state('about', {
      url: '/about',
      template: '
About Us
'
    })
    .state('about.history', {
      url: '/history',
      template: '
Our History
'
    })
    .state('about.team', {
      url: '/team',
      template: '
Our Team
'
    })
    .state('contact', {
      url: '/contact',
      template: '
Contact Us
'
    });
});
app.controller('myCtrl', function($scope, $state) {
  $scope.getChildStates = function(stateName) {
    var childStates = [];
    var states = $state.get();
    for (var i = 0; i < states.length; i++) {
      if (states[i].name.startsWith(stateName + '.')) {
        childStates.push(states[i].name);
      }
    }
    return childStates;
  };
});

html
  
  
  
  
  
  
Child States of 'about'
  
    
{{ childState }}