使用深度链接刷新 html 模式 Angular 应用程序答案

【问题标题】：Refresh html mode angular app with deep linking使用深度链接刷新 html 模式 Angular 应用程序
【发布时间】：2014-06-11 20:53:25
【问题描述】：

像我之前的许多人一样，我正在努力使用我的 Angular 应用程序来刷新页面。

我正在使用 angular/require/webapi。我从angular phone tutorial 扩展了这个

我也将此项目放在github 上

这是我现在坐的地方。

我已经设置了路线。它们处于 html 模式。他们致力于网站导航。刷新导致问题。我设置代码 Gobal.asax.cs 以将故障重新路由到 index.html。基本页面 (/phones) 能够刷新。刷新详细信息页面（电话/motorola-xoom-with-wi-fi）时出现错误。

这是我的路线代码

define(['angular', 'app', 'angularRoute'], function (angular, app)
{
    'use strict';

    var myApp = app.config(['$routeProvider', '$provide', '$locationProvider', function ($routeProvider, $provide, $locationProvider) {

        //$provide.decorator('$sniffer', function ($delegate) {
        //    $delegate.history = false;
        //    return $delegate;
        //});

        $routeProvider
            .when('/', {
                redirectTo: '/phones'
            })

            .when('/phones', {
                templateUrl: '../Web/Templates/partials/_phones.html',
                controller: 'PhoneList'
            })

            .when('/phones/:phoneId', {
                templateUrl: '../Web/Templates/partials/_phone-detail.html',
                controller: 'PhoneDetail'
            });
            //.otherwise({
            //    redirectTo: '/phones'
            //});


        // enable html5Mode for pushstate ('#'-less URLs)
        //$locationProvider.hashPrefix('!');
        $locationProvider.html5Mode(true);

    }]);

    return myApp;
});

我的 global.asax.cs

public class WebApiApplication : System.Web.HttpApplication
{
    private const string ROOT_DOCUMENT = "index.html";

    protected void Application_Start()
    {
        GlobalConfiguration.Configure(WebApiConfig.Register);
    }



    protected void Application_BeginRequest(Object sender, EventArgs e)
    {
        string url = Request.Url.LocalPath;
        string[] newURL = new string[1];
        newURL[0] = ROOT_DOCUMENT;
        if (!System.IO.File.Exists(Context.Server.MapPath(url)))
            Context.RewritePath(ROOT_DOCUMENT);
    }
}

还有我的 index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <title>Angular-RequireJS sample app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>-->
    <link rel="stylesheet" type="text/css" media="all" href="Content/css/app.css" />
    <link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="all" href="Content/css/bootstrap-responsive.css" />
    <base href="/">
</head>

<body>
    <div class="container-fluid">
        <p>Single Page Web Ap</p>
        <div ng-view></div>
    </div>
    <script data-main="Scripts/app/main" src="Scripts/lib/require.js"></script>
</body>
</html>

【问题讨论】：

标签： angularjs asp.net-web-api routes requirejs single-page-application

【解决方案1】：

这应该可以解决问题 - 更改常量定义：

private const string ROOT_DOCUMENT = "/index.html";
// instead of this
// private const string ROOT_DOCUMENT = "index.html";

也可以在这里查看：How to: Configure your server to work with html5Mode （向下滚动到ASP.Net C# Rewrites）看到sn-p：

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}

注意，我还建议更改 Application_BeginRequest 以正确处理这样的 API 请求：

protected void Application_BeginRequest(Object sender, EventArgs e)
{
   var path = Request.Url.AbsolutePath;
   var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);

   if (isApi)
   {
       return;
   }
   ...

【讨论】：