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

Question

Я использую AngularJS внутри моего приложения ASP.NET MVC, но у меня проблема с вложенными маршрутами. Я использую маршрутизацию ASP.NET MVC, но внутри SPA я использую UI-Router.

Мой Home/Index мой AngularJS приложение и <div ui-view> находится в Index.cshtml

Я хочу мой URL, чтобы быть полностью контролируется моей AngularJS SPA (с html5Mode = истина).

Я настроил мой RouteConfig в ASP.NET MVC, как это:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

routes.MapRoute(
    name: "DefaultHome", 
    url: "", 
    defaults: new { controller = "Home", action = "Index" } 
); 

routes.MapRoute(
    name: "Default", 
    url: "{.*}", 
    defaults: new { controller = "Home", action = "Index" } 
); 

Я использую UI-маршрутизатор, но это не имеет никакого значения, потому что это проблема маршрутизации ASP.NET MVC. Код AngularJS маршрутизации, однако, следующее:

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) { 

    $urlRouterProvider.otherwise("/"); 

    $stateProvider 
    .state('home', { 
     url: "/", 
     templateUrl: "Scripts/app/partials/home.html", 
     controller: "HomeController" 
    }) 
    .state('login', { 
     url: "/login", 
     templateUrl: "Scripts/app/partials/login.html", 
     controller: "AccountController" 
    }) 
    .state('login.list', { 
     url: "/list", 
     templateUrl: "Scripts/app/partials/login.list.html", 
     controller: "AccountController" 
    }); 

    $locationProvider.html5Mode(true); 

}); 

Это отлично работает, когда я иду в / или /login, но когда я иду к /login/list я получаю 404 из моего приложения ASP.NET MVC, говоря:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. 

В чем проблема? Я указал правило {.*}, поэтому оно должно быть направлено в приложение AngularJS.

Answer 1

«Это СПА, где маршруты контролируются AnguleJS UI-Router» - не соответствует действительности, пока приложение не будет загружено.

Вам необходимо сделать приложение доступным с любого возможного маршрута.

Что я обычно делаю это, чтобы иметь структуру, как это на сервере:

• активов/* -> игнор Маршруты (пропуск думал к файлам)
• апи/* -> Api Маршруты
• * -> index.html/index.cshtml/???

Вот пример набора маршрутов в порядке, который используется для меня.

router 
.Route("assets/{*ignore}").Through() 
.Route("api/search").To<SearchController>() 
.Route("api/content/{contentType}/{id}").To<ContentController>(x => x.Set.Defaults(new {id = RouteParameter.Optional})) 
.Route("api/file/{contentType}/{id}/{head}").To<FileController>(x => x.Set.Defaults(new {id = RouteParameter.Optional, head = RouteParameter.Optional})) 
.Default().To<TController>(); 

(Обратите внимание, что они определены в рамках который обволакивает рамки WebAPI, поэтому, следовательно, свободно синтаксис и сильно типизированный контроллер ориентации)

Если вы используете бритву для главного вида я обычно делаю:

<base href="@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~/"))" /> 

Установить базовый путь.