Angular 使用 ASP MVC 进行路由

Question

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

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

然后当人们登录时，我希望 MVC 将他们路由到 testapp.com/Dashboard/#/，然后我希望能够使用 ng-view 像这样使用 Angualar 加载页面： 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 是我的着陆页，它没有使用 angular 路由，它只有用于登录和注册的 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/#/

另一个问题是，当我点击我的链接时，它会直接返回到 Home/Index 并且 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 }
    );
}

所以我的问题是我的代码有什么问题导致它不能像我想要的那样运行？我需要什么 add/change?

谢谢！

Answer 1

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

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

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

希望这对其他人有帮助！

注意

我没有更改我的 MVC 中的任何内容 RouteConfig.cs 您可以保留默认值。另外，我不得不摆脱 ViewStart，因为那会把事情搞砸。

Angular 使用 ASP MVC 进行路由

Angular Routing with ASP MVC

asp.net-mvc

asp.net-mvc-routing

angularjs

angularjs-ng-route