My Sample application has two MVC Controllers 1.HomeController 2.DetailsController
HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
Home -> Index.cshtml
<div>
Home - Index
</div>
DetailsController.cs
public class DetailsController : Controller
{
public ActionResult Index()
{
return View();
}
}
Details -> Index.cshtml
<div>
Details - Index
</div>
And in the _Layout.cshtml I have links to Home and Details.
_ViewStart.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
_Layout.cshtml
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<base href="/" />
<title>Angular Routing</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/App/app.js"></script>
</head>
<body>
<h1>Layout</h1>
<a href="/Home">Home</a>
<a href="/Details">Details</a>
<div ng-view>
@RenderBody()
</div>
</body>
</html>
When the page loads, I get the content from _Layout.cshtml, but nothing gets loaded into the ngView container.
My guess, angular is trying to load the Home view as set in the route config for root route '/'. But its gets back the full view with _Layout.cshtml, which again tries to load the home page and this loop goes on indefinitely.
app.js
(function () {
var app = angular.module("app", ["ngRoute"]);
app.config(config)
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: "/Home",
})
.when('/Home', {
templateUrl: "/Home",
})
.when('/Details', {
template: "/Details",
});
$locationProvider.html5Mode(true);
}
}());
I get this error in the Chrome console.
angular.js:13920 RangeError: Maximum call stack size exceeded
So I tried to return Partial view from HomeController, which loaded the Home/Index view but the content in _Layout.cshtml did not load.
How to do angular routing in MVC application,is there a way to use the ngView in the _Layout.cshtml?
