角度路由不适用于 ASP.Net MVC答案

【问题标题】：Angular routing not working with ASP.Net MVC角度路由不适用于 ASP.Net MVC
【发布时间】：2017-01-08 04:27:13
【问题描述】：

主页我在我的 ASP.Net MVC 应用程序中使用 AngularJS，我正在使用角度路由，但它不起作用。

角度路线定义为：

var app = angular.module("webApp",['ngRoute']);
app.config(function($routeProvider){
    $routeProvider.when(
        "/",{
            templateUrl: "home/dashboard",
            controller: "webCtrl"
        })
        .when(
            "/page1",{
                templateUrl: "home/contact",
                controller: "page1Ctrl"
            })
        .otherwise({
                templateUrl: "home/contact",
                controller: "page1Ctrl"
        });
});

导航链接显示在index.cshtml，如下所示：

<body ng-app="webApp">
    <a href="#/">Home</a>
    <a href="#page1">Page1</a>
    <div ng-view></div>
</body>

启动时显示dashboard，但单击第二个链接时不显示contact 页面。此外，它还显示奇怪的 URL。在主页上显示http://localhost:58193/#!/，当我点击page1 链接URL 更改为http://localhost:58193/#!/#%2Fpage1。如果我弄错了什么，请告诉我。

【问题讨论】：

添加您在浏览器上看到的屏幕截图以及控制台错误（如果有）
添加截图。控制台中没有显示错误。
更新你的 asp.net 控制器，完整的角度路由代码。

标签： angularjs asp.net-mvc

【解决方案1】：

你试过这样做吗？

var app = angular.module("webApp",['ngRoute']);
app.config(function($routeProvider){
    $routeProvider.when(
        "/",{
            templateUrl: "/home/dashboard",
            controller: "webCtrl"
        })
        .when(
            "/page1",{
                templateUrl: "/home/contact",
                controller: "page1Ctrl"
            });

  $routeProvider.otherwise({ redirectTo: "/page1" });


  $locationProvider.hashPrefix("!");
});

然后：

<body ng-app="webApp">

    <a ng-href="#!page1">Page1</a>
    <div ng-view></div>
</body>

也许把你的 index-html 放在你的部分中：

 <meta name="fragment" content="!">
   <base href="/">

【讨论】：

感谢费德里科！当我将锚标记的 href 更改为 !#page1 时，它起作用了。但是我仍然想知道为什么它会在浏览器中显示奇怪的 URL，例如 page1 的 localhost:58193/#!/(home page) 和 (localhost:58193/#!/page1)。