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

时间:2017-01-07 18:57:26

标签: angularjs asp.net-mvc

主页documentation我正在使用AngularJS和我的ASP.Net MVC应用程序,我正在使用角度路由,但它无法正常工作。

角度路线定义为:

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时,链接网址会更改为http://localhost:58193/#!/#%2Fpage1。如果我误会了,请告诉我。

1 个答案:

答案 0 :(得分: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="/">