AngularJS $routeProvider 和 ASP.NET MVC 中的相对 URL答案

【问题标题】：AngularJS $routeProvider and relative URLs in ASP.NET MVCAngularJS $routeProvider 和 ASP.NET MVC 中的相对 URL
【发布时间】：2013-02-06 06:09:32
【问题描述】：

我对 AngularJS 完全陌生。只是想尝试使用 $routeProvider 的相对 URL。

这是场景：

我有一个“编辑”页面，该页面的 ASP.NET MVC 链接是：

http://localhost/Workflow/Edit

所以 ASP.NET MVC 控制器是“WorkflowController”，操作是“编辑”。对于 Partials，我有 Controller 操作，每个操作都返回一个 Partial View，如下所示：

    public ActionResult WorkflowTransition()
    {
        return PartialView("WorkflowTransition");
    }

    public ActionResult WorkflowTransitionApprovers()
    {
        return PartialView("WorkflowTransitionApprovers");
    }

以下是 AngularJS 模块配置 - 注意：为每个路由调用 PartialView（如上所述）（这可能不正确）：

    $routeProvider.when('Workflow/WorkflowTransition', {
        templateUrl: '/Workflow/WorkflowTransition',
        controller: 'transitionCtrl',
    });
    $routeProvider.when('Workflow/WorkflowTransitionApprovers', {
        templateUrl: '/Workflow/WorkflowTransitionApprovers',
        controller: 'approversCtrl'

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

注意：我没有指定以下任何一项：

$locationProvider.html5Mode(false);

或

$locationProvider.html5Mode(false).hashPrefix('!');

href 链接是这样指定的：

<a href="#/Workflow/WorkflowTransition">{{workflow.Identifier}}</a>

这会生成这种形式的链接：

http://localhost/Workflow/Edit#/Workflow/WorkflowTransition

这显然是错误的（点击链接可能没有任何作用，可能是因为浏览器试图导航到哈希），所以我尝试了前导 '/'，但也没有运气：

<a href="/#/Workflow/WorkflowTransition">{{workflow.Identifier}}</a>

如果我直接导航部分内容，即http://localhost/Workflow/WorkflowTransition，浏览器会按原样呈现 html（以及 angularjs 花括号 {{}}）。

我的问题是：AngularJS 如何处理 '#' 或 '#!'在确定相对 URL 时？例如执行这条路线（假设我从锚标记中的 URL 中删除 /Edit 部分）：

$routeProvider.when('Workflow/WorkflowTransition',匹配网址：

http://localhost/Workflow/#WorkflowTransition?

它是否会从 URL 中删除“#”，然后根据 $routeProvider.when() 中的 URL 模式对其进行检查？

有人可以建议相对 URL 的正确路由吗？

【问题讨论】：

标签： asp.net-mvc angularjs hashbang

【解决方案1】：

根据我的观察，匹配路由时必须删除哈希。我有一个类似的链接

<a href="#Objects">

生成网址

http://localhost:55033/#/Objects

我的路线设置是

$routeProvider.when("/Objects", {
    templateUrl: "objects.html",
    controller: ObjectCtrl
});

这按预期工作，拉入正确的部分。请注意，在这种情况下，我不是通过 ASP.NET MVC 控制器渲染部分。相反，我将 objects.html 作为纯 html 文件放置，并且我在 href 中使用哈希，因此 ASP.NET MVC 路由不会启动。

【讨论】：

【解决方案2】：

Routeprovide 应该设置如下。

$routeProvider.when('/Workflow/WorkflowTransition', {
    templateUrl: "WorkflowTransition.html",
    controller: WorkflowTransitionCtrl
});

并且 URL 应该在下面的格式中输入。

http://localhost/#/Workflow/WorkflowTransition ?

【讨论】：