我在Angular.js和MVC5中路由時遇到了一些麻煩。我簡化了下面的例子。MVC5和Angular.js路由 - URL不匹配

我的角路由碼是：

app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) { 

    $routeProvider.when("/", { 
     template: "<h1>index</h1>", 
    }) 
    .when("/Home/About", { 
     template: "<h1>about</h1>", 
    }) 
    .when("/Home/Contact", { 
     template: "<h1>contact</h1>", 
    }) 
    .otherwise({ 
     template: "<h1>Error</h1>", 
    }); 

}]);

的MVC Home控制器具有用於每個的方法，以及每個視圖具有NG-視圖屬性的DIV。

當我瀏覽到關於或聯繫的路線仍然映射到索引。

如果我更改索引路徑：

$routeProvider.when("/Home/Index", { 
     template: "<h1>index</h1>", 
    })

然後否則踢，我看到

錯誤

。

該代碼看起來與我使用的其他角碼和網上的例子完全相同。有什麼建議麼？

更新：感謝以下答案。我想我昨天晚上沒有很好地解釋我的問題，這是漫長一天的結果。我的問題是，我想有一個網站的子頁面上的迷你水療中心，所以對主網頁的路徑將是：

.when("/userPermissions/index", { 
     templateUrl: "/scripts/bookApp/userPermissions/main.html", 
     controller: "userPermissionController", 
    })

和「/ userPermissions /指數」的路徑，其將由服務器提供的頁面未被路由匹配。

來源

2015-02-05 John McArthur

你使用的是html5模式嗎？ – Claies 2015-02-05 18:22:00

您必須初始化控制器 - 例如控制器：「HomeController」，模板：... – 2015-02-05 18:22:13

不，不使用html5模式。在簡化版本中，我沒有使用角度控制器，只是替換模板。 – 2015-02-05 18:29:55

Angular通過設計一個單頁面應用程序（SPA）框架。它旨在處理單個服務器頁面請求中的請求，並處理路由更改，而無需對服務器進行後續調用。因此，對於每個頁面加載，頁面都位於應用程序的「根」處。或者/，無論服務器上使用什麼路徑來加載頁面。

後續的頁面加載和路由使用'散列'符號/#/someroute來處理，以抑制瀏覽器重新加載。因此，被角度$routeProvider匹配的實際路由是http://example.com/#/Home/About，但是這是從/服務器路由加載的。

如果您在服務器上將頁面重定向到/Home/About，但仍然想要在Angular中找到該匹配項，那麼路由將爲http://example.com/Home/About#/Home/About。正如你可以想象的那樣，這是非常有問題的。

HTML5路由模式可用於從您的路線中刪除，允許您在角度$routeProvider中匹配http://example.com/Home/About。但是，爲了讓Angular真正發光，您還應該在服務器上配置重寫，而不是在ASP.Net應用程序中將這些路線作爲單獨的視圖來處理。通常，如果您可以將服務器通信限制爲API調用，那麼您將擁有更清潔的解決方案，因爲客戶端角度的混合服務器HTML（或Razor）會非常快速地混淆。

來源

2015-02-05 18:37:48 Claies

我建議你爲你的角度SPA創建一個基地。

這意味着你將需要創建你的應用程序中的C＃控制器，將有一個動作即指數

SPAController。CS

using System.Web.Mvc; 

namespace AngularApp.Controllers 
{ 
    public class SPAController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 
    } 
}

查看/ SPA /索引

<ul> 
     <li><a href="/#/">Home</a></li> 
     <li><a href="/#/Home/About">About</a></li> 
     <li><a href="/#/Home/Contact">Contact</a></li> 
    </ul> 

    <div ng-view></div> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>

現在所有的設置命中HTML NG-視圖將通過觀看路線加載局部視圖。

點擊瀏覽器http://anything.com/spa/#/。然後你的角度應用程序將開始在頁面上工作。

我不會建議你在MVC應用程序中使用html5mode()。這會在您的應用程序內部造成很多問題。操縱事物需要更多時間。

謝謝。

來源

2015-02-05 19:59:04

MVC5和Angular.js路由 - URL不匹配

錯誤

回答

相關問題