angularjs ngRoute路由 多层嵌套的问题

Question

angularjs ngRoute多层嵌套路由导致浏览器前进后退按钮无效。
我现在的目录结构大概是这样：

--home
    --page1
    --page2
        --page2-1
        --page2-2
    --page3
--about
--contact

先贴下代码：

var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
    .when('/', {
        templateUrl : 'home.html',
        controller  : 'mainController'
    })
    // route for the about page
    .when('/about', {
        templateUrl : 'about.html',
        controller  : 'aboutController'
    })
    // route for the contact page
    .when('/contact', {
        templateUrl : 'contact.html',
        controller  : 'contactController'
    })
    .when('/page1', {
        templateUrl : 'page1.html',
        controller  : 'mainController'
    })
    .when('/page2', {
        templateUrl : 'page2.html',
        controller  : 'mainController'
    })
    .when('/page2-1', {
        templateUrl : 'page2-1.html',
        controller  : 'mainController'
    })
    .when('/page2-2', {
        templateUrl : 'page2-2.html',
        controller  : 'mainController'
    })
    .when('/page3', {
        templateUrl : 'page3.html',
        controller  : 'mainController'
    });
});
scotchApp.controller('mainController', function($scope) {
});
scotchApp.controller('aboutController', function($scope) {
});
scotchApp.controller('mainController', function($scope) {
});

现在的问题是home子目录下的页面在代码中感觉是平级的（主要是我对ngRoute不是很熟，不知道怎么将home子目录下的页面写到home里面），可能是这个原因导致浏览器的前进后退功能无效，如果有知道怎么解决的朋友请告知一下，谢谢。。

Answer 1

建议使用第三方的ui-router

Answer 2

第三方插件ui-router.https://github.com/angular-ui...