AngularJS基于ui-route实现深层路由的方法【路由嵌套

 <script src="js/angular-ui-router.js"></script>

<ul>
  <li><a ui-sref="index">首页</a></li>
  <li><a ui-sref="fruit">水果</a></li>
  <li><a ui-sref="vegetable">蔬菜</a></li>
 </ul>

angular.module('myapp',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise('/index');
  $stateProvider.state('fruit',{
    url:'/fruit',
    templateUrl:'fruit.html'
  })
  .state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
  })
  .state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
  });
});

 .state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
  })
  .state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
  });

 <ul>
  <li><a ui-sref="fruit.orange">橘子</a></li>
  <li><a ui-sref="fruit.apple">苹果</a></li>
  <li><a ui-sref="fruit.banana">香蕉</a></li>
 </ul>
 <div ui-view></div>

$stateProvider.state('fruit',{
    url:'/fruit',
    templateUrl:'fruit.html'
})
.state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
})
.state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
})
.state('fruit.orange',{
    url:'/orange',
    templateUrl:'orange.html',
})
.state('fruit.apple',{
    url:'/apple',
    templateUrl:'apple.html'
})
.state('fruit.banana',{
    url:'/banana',
    templateUrl:'banana.html'
});