Angular 1.6 NestedRoute（单页应用程序）

Question

我正在尝试使用ngRoute在agularjs 1.6中使用单页应用程序。我的代码如下。

角色代码

let mainAngularModule = angular.module("acc-management", ['ngMaterial','ngRoute']);

mainAngularModule.config(routeConfig);

routeConfig.$inject = ['$routeProvider'];
function routeConfig($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Personaldata', {
            templateUrl: 'PersonalPreference.html',
            controller: 'PersondataController as personController'
        })
        .when('/UserData', {
            templateUrl: 'UserDefinedElement.html',
            controller: 'accountController as accController'
        })
}

class AccountController {
    static $inject = ["$scope"];

    constructor(private $scope) {
        debugger;
    }    
}

mainAngularModule.controller("accountController", AccountController);

mainAngularModule.controller("PersondataController", PersonalPreferencesController);

class PersondataController {

    public scope: Object = {
        title: "Personal Preferences"
    }
}

class UserData {

}

HTML

<div layout="row" layout-xs="column">
    <div flex="18">
                      <md-subheader class="md-no-sticky">User Preferences</md-subheader>
            <md-list-item href="#/PersonalPreferences">
                <span>Personal Preferences</span>
            </md-list-item>
            <md-list href="#/UserData">
              <span>User Data</span>
            </md-list>
        </md-sidenav>

    </div>
    <div flex>
        <md-content layout-padding>
            <div ng-view></div>
        </md-content>
    </div>
</div>

我的代码工作正常路由。在Userdata我有子菜单的地址，资格。我没有得到我应该怎么写它的角度路由代码（嵌套路由）.Below是我的HTML代码。

HTML

<div layout="row" layout-xs="column">
        <div flex="18">
                <md-list-item href="#/">
                    <span>Address</span>
                </md-list-item>
                <md-list href="#/">
                  <span>Qualifications</span>
                </md-list>
        </div>
    </div>