AngularJS路由在布局页面中不起作用

Question

我正在使用ASP.Net MVC和AngularJS构建应用程序。在页面标题中（在我的_Layout.html文件中），在菜单下方，我有一个区域想要根据菜单点击更改内容。

我有这个领域：

<div ng-non-bindable>
                        <div id="menu-area">
                            <ng-view>

                            </ng-view>
                        </div>
                    </div>

然后我的菜单上有一个例子：

<li><a class="active" href="#/aboutus">About Us</a></li>

然后在我的routeProvider上：

angular.module('main').config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: '/App/Menu/View/ImageSlider.html'
    });

    $routeProvider.when('/aboutus', {
        templateUrl: '/App/Menu/View/menu.html',
        controller: 'indexViewModel'
    });

    $routeProvider.otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode({
        enabled: true,
        requiredBase: false
    });
});

但是我第一次加载页面时，没有给我ImageSlider.html，那么当我按下该菜单项时，也不会给我菜单。