ASP.NET MVC和AngularJS路由

我在我的ASP.NET MVC應用程序中使用AngularJS，但我遇到了嵌套路由的問題。我正在使用ASP.NET MVC路由，但在SPA內使用UI-Router。ASP.NET MVC和AngularJS路由

我Home/Index是我的AngularJS應用程序和<div ui-view>在Index.cshtml

我希望我的URL由我AngularJS SPA完全控制（與html5Mode = TRUE）。

我已經建立了我的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我從我的ASP.NET MVC應用程序中獲得404說：

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

問題是什麼？我已經指定了{.*}規則，因此它應該被定向到AngularJS應用程序。

來源

2014-09-28 Gaui

聽起來更像是一個'web.config'問題，因爲你希望服務器管理虛擬目錄而不是你的MVC框架 – charlietfl 2014-09-28 12:59:30

你是什麼意思？我希望一切都指向控制器主頁和操作索引，以便我的SPA可以嵌套路由。 – Gaui 2014-09-28 13:20:13

這意味着你想讓服務器做到這一點，而不是你的mvc框架 – charlietfl 2014-09-28 13:21:34

「這是一個由AngularJS UI-Router控制路由的SPA」 - 直到應用程序實際加載後才成立。

您需要使應用程序可用於各種可能的路線。

我通常做的是在服務器上有這樣的結構：

資產/ * - >忽略路線（PASS認爲文件）
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("~/"))" />

設置基準路徑。

來源

2014-10-01 12:40:24 Jens

ASP.NET MVC和AngularJS路由

回答

相關問題