title: How to use data-ng-view in _layout.cshtml
body: <p>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. </p>
  
  <p>Here is my _layout.cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="HappyHut"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header page-scroll"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #bs-example-navbar-collapse-1"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="/ContactUs"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/AboutUs"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/register"&gt;Register&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Test"&gt;Test&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content" data-ng-view&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
  footer data
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
      @Scripts.Render("~/bundles/Angular")
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For testing purpose I have inserted some test html data in main.cshtml.</p>
  
  <p>and here is my js file.</p>
  
  <pre><code>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'
      });
  }]);
  </code></pre>
  
  <p>Here the test.cshtml is like</p>
  
  <pre><code>@{
          //Layout = null;
      }
      Hi Test
  </code></pre>
  
  <p>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 </p>
  
  <blockquote>
    <p>page is not running due a long running script</p>
  </blockquote>
  
  <p>in the console it logs below error more than once for above issue</p>
  
  <blockquote>
    <p>tried to load angular more than once</p>
  </blockquote>
  
  <p>. Now I don't want to copy Header and footer in all the pages.</p>
  
  <p>Can anybody please tell me how to proceed to make Main page content visible or all the pages which will be created using _layout.cshtml?</p>