Angular routing in ASP.NET MVC application, How to use ngView in Asp.Net MVC _Layout.cshtml?

Question

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?

Prisoner ZERO · Accepted Answer · 2017-04-30 22:26:38Z

2

First of all, if you want to leverage Angular with ASP.Net MVC, you want to watch AngularJS & ASP.NET MVC Playing nice Tutorial by Miguel Castro.

You can view my sample project at GitHub.

The concept is to use MVC Route as main entry point for SPA, and then let Angular Route handle routing for individual pages. Main take away is MVC RouteConfig.cs in which you want users/{*catchall}.

FYI: in my sample project, I use MVC's cshtml as Angular View. You can ignore if you want to use regular html. In addition, I use Angular 1.5 Component so that I can convert to Angular 2 easily when it is available for production.

edited Apr 30, 2017 at 22:26

Prisoner ZERO

14.2k21 gold badges102 silver badges149 bronze badges

answered Nov 23, 2016 at 14:42

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mkr Over a year ago

Thank you so much for the response..it really helped.

Collectives™ on Stack Overflow

Angular routing in ASP.NET MVC application, How to use ngView in Asp.Net MVC _Layout.cshtml?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related