How to use data-ng-view in _layout.cshtml

问题

I am trying to crate a MVC application with Angular. My application has common Header and footer. So I added it in _layout.cshtml. There are some static pages in the application. Hence I want to load this using Angular routing.

Here is my _layout.cshtml

<!DOCTYPE html>
<html data-ng-app="HappyHut">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" })
            </div>
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/ContactUs">Contact Us</a></li>
                    <li><a href="/AboutUs">About Us</a></li>
                    <li><a href="/login">Login</a></li>
                    <li><a href="/register">Register</a></li>
                    <li><a href="/Test">Test</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content" data-ng-view>
        @RenderBody()
        <hr />
        <footer>
footer data
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/Angular")
</body>
</html>

For testing purpose I have inserted some test html data in main.cshtml.

and here is my js file.

var HappyHut = angular.module("HappyHut", ['ngRoute']);

HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('!').html5Mode({
        enabled: true,
        requireBase: false
    });

    $routeProvider
    .when('/ContactUs', {
        templateUrl: 'Home/Contact'
    })
    .when('/AboutUs', {
        templateUrl: 'Home/About'
    })
    .when('/Test', {
        templateUrl: 'Home/Test'
    });
}]);

Here the test.cshtml is like

@{
        //Layout = null;
    }
    Hi Test

When I am loading Main.cshtml, the page gets loaded but body part gets hidden. If I click on Test, it gets loaded. However, if I add Layout = null, the same thing happens as Main.cshtml and a pop-up is opened which says