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">
<!--
<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
@{
}
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
page is not running due a long running script
in the console it logs below error more than once for above issue
tried to load angular more than once.
Now I don't want to copy Header and footer in all the pages.
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?