使用 ASP MVC 的角度路由答案

【问题标题】：Angular Routing with ASP MVC使用 ASP MVC 的角度路由
【发布时间】：2017-02-21 07:50:03
【问题描述】：

我正在处理一个 MVC 测试项目，看看是否可以使用角度路由。

我所说的使用它的意思是我希望能够为我的应用创建一个登录页面：www.testapp.com

然后，当人们登录时，我希望 MVC 将他们路由到 testapp.com/Dashboard/#/，然后我希望能够使用 ng-view 加载带有 Angular 的页面，如下所示： testapp.com/Dashboard/#/PageOne、testapp.com/Dashboard/#/PageTwo等

这是我尝试过的： main.js：

angular.module('App', ['ngRoute', 'ngResource']);

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/Dashboard', {
        templateUrl: 'Dashboard/Index'
    })
    .when('/PageOne', {
        templateUrl: 'Dashboard/PageOne'
    })
});

~/Views/Home/Index.cshtml 是我的登陆页面，它没有使用角度路由，它只有 ActionLinks 来登录和注册

~/Views/Dashboard/Index.cshtml 是我使用 ng-app 和 ng-view 的地方，我有这样的链接：<a href="/#/Dashboard">Dashboard</a>, <a href="/#/PageOne">Page One</a>

问题是，当我转到 testapp.com/Dashboard 时，它加载的 URL 变成了 testapp.com/Dashboard#/ 而不是 testapp.com/Dashboard/#/

另一个问题是，当我点击我的链接时，它会直接返回主页/索引，并且 URL 如下所示：testapp.com/#/PageOne 但主页正在显示

在我的 RouteConfig.cs 文件中，它只是默认值：

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

所以我的问题是我的代码有什么问题导致它不能像我想要的那样运行？我必须添加/更改什么？

谢谢！

【问题讨论】：

标签： angularjs asp.net-mvc asp.net-mvc-routing angularjs-ng-route

【解决方案1】：

所以我发现问题出在我编写链接的方式上。一旦加载了我的实际 Angular 应用程序（我在仪表板而不是初始化 angular 的登录页面），我必须将我的锚标记 href 从 \#\{Route} 更改为 '/Dashboard/#/{Route}'。这是我更新的角度路线配置：

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'Index'
    })
    .when('/PageOne', {
        templateUrl: 'PageOne'
    })
});

这完全解决了我的问题，因此我现在可以在需要时让角度路由接管节目，并且在我的应用程序中也有 MVC ActionLinks。

希望这对其他人有帮助！

注意

我没有更改 MVC RouteConfig.cs 中的任何内容，您可以保留默认值。我还必须摆脱 ViewStart，因为那会搞砸。

【讨论】：