使用AngularJS的UI-Router，我们可以轻松地构建复杂的前端应用程序，并实现状态之间的无缝切换。UI-Router提供了一种默认子状态的功能，可以在父状态下自动加载一个默认的子状态。同时，我们还可以使用ui-sref指令来实现在不同状态之间的导航。

html

javascript
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .state('home.default', {
      url: '/default',
      templateUrl: 'views/default.html',
      controller: 'DefaultController'
    })
    .state('product', {
      url: '/product',
      templateUrl: 'views/product.html',
      controller: 'ProductController'
    });
  $urlRouterProvider.otherwise('/home/default');
});

html
Home
Welcome to the home page!
Go to default page
Default Page
This is the default page of the home state.
Product
Welcome to the product page!
Go back to home page

javascript
// HomeController
app.controller('HomeController', function($scope) {
  // Controller logic goes here
});
// DefaultController
app.controller('DefaultController', function($scope) {
  // Controller logic goes here
});
// ProductController
app.controller('ProductController', function($scope) {
  // Controller logic goes here
});