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?

Answer 1

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.

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

Question

1 answers

solution1
2 ACCPTED 2016-11-23 14:42:55

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

Question

1 answers

solution1 2 ACCPTED 2016-11-23 14:42:55

solution1
2 ACCPTED 2016-11-23 14:42:55