AngularJS и MVC Маршрутизация

Question

Я проводил много исследований по внедрению SPA с AngularJS на MVC, но я думаю, что у меня что-то не хватает. Нужен ли мне MVC-контроллер для каждого View еще, или должен быть угловатым, чтобы захватить файл cshtml или html для рендеринга на начальной странице без наличия MVC-контроллера?

По существу у меня есть

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 
} 

который возвращает свою индексную страницу, которая просто

<div data-ng-view></div> 

Он также загружая макет с индексной странице, которая имеет свое меню на нем все ссылки , а также все файлы сценариев. Когда я нажимаю ссылку, такие как:

<a href="/Home/ChangeLog">Change Log</a> 

который содержит

<h2>{{Changes.Title}}</h2> 
<div>{{Changes.Version}}</div> 

Он не может загрузить что-нибудь, потому что он пытается дотянуться до контроллера MVC. Если у меня есть контроллер MVC, возвращающий частичное представление, он возвращает только частичное представление в виде загрузки всей страницы. Мой Угловая файл приложения заключается в следующем:

var myApp= angular.module("myApp.WebConsole", ['ngRoute']); 

myApp.controller("IndexController", IndexController); 

var configFunction = function ($routeProvider, $locationProvider, $httpProvider) { 

$routeProvider.when("/Home/Index", 
    { 
     templateUrl: "Home/Index.cshtml", 
     controller: IndexController 
    }); 

$routeProvider.when("/Home/ChangeLog", 
    { 
     templateUrl: "Home/ChangeLog.cshtml", 
     controller: IndexController 
    }); 
$locationProvider.html5Mode(true); 
} 

configFunction.$inject = ["$routeProvider", "$locationProvider", "$httpProvider"]; 

myApp.config(configFunction); 

И indexcontroller.js файл:

var IndexController = function ($scope) { 
    $scope.Heading = "Index Page"; 
    $scope.Changes = { 
     Title: "Changes", 
     Version: "1.0" 
    }; 
} 

IndexController.$inject = ['$scope']; 

В JS-файлы находятся в отдельной папке. Представления находятся в стандартной структуре папок MVC.

Что мне не хватает о том, как это работает? Я ожидал бы, что щелчок по ссылке приведет к извлечению файла cshtml или даже к html-файлу и отображению html в div с тегом data-ng-view. Должен ли я не использовать представления Razor (возможно, часть проблемы, так как я ожидаю, что MVC-контроллер должен будет отображать данные кода, если таковые имеются)? Хотя у меня все еще есть одна и та же проблема: не найти страницу, если я использую только html.

Edit 2: Хорошо, так что я частично понял это, проблема с использованием

$locationProvider.html5Mode(true); 

Без этого, если я делаю ссылку на меню

<a href="/#/Home/ChangeLog">Change Log</a> 

Тогда все кажется работать нормально. Я считаю, что это также ожидаемый формат ссылок, использующих Angular. Есть ли какая-то магия для создания MVC и угловой маршрутизации с включенным html5Mode?

Answer 1

Вы хотите использовать что-то более похожее на Home/Index#/Changelog - Маршрутизация MVC останавливается по индексу, а угловая «поднимает» после #.

Есть много примеров, если вы ищете «mvc-угловую маршрутизацию», но это идея.

Answer 2

Вы правы, проблема в том, что вы используете html5mode (true), который не будет использовать # urls, и поэтому сначала сделает запрос браузера на сервер. Если вы хотите продолжить использование html5mode = true, вам нужно заставить ASP.NET MVC направить все эти угловые URL-адреса на одну и ту же страницу (ваша угловая домашняя страница приложения). Затем, когда страница загружается на клиент, угловая маршрутизация перейдет в правильное положение.

Один из способов, которым вы можете это сделать, - это «глобальный» маршрут MVC.
Предполагая, что вы угловое приложение запускаются в/Home/Index, редактировать свои методы RouteConfig.RegisterRoutes и добавить этот маршрут:

routes.MapRoute(name: "My angular webapp", 
url: "Home/{*catchall}", 
defaults: new { controller = "Home", action="Index", id=UrlParameters.Optional } 
); 

Это сделает все запросы/Home/ничего возвращающего представление/Index Home. Таким образом, вы можете использовать другой контроллер для своего углового приложения, если вы хотите иметь другие URL-адреса в разделе Home, управляемые MVC.