使用深层链接刷新html模式角度应用

Question

使用深层链接刷新html模式角度应用

dan*_*tch 3 routes requirejs asp.net-web-api angularjs single-page-application

像我之前的许多人一样,我正在努力让页面刷新与我的角度应用程序一起工作.

我正在使用angular/require/webapi.我从角度电话教程扩展了这个

我把这个项目在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;
});

Run Code Online (Sandbox Code Playgroud)

我的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);
    }
}

Run Code Online (Sandbox Code Playgroud)

还有我的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rad*_*ler 6

这应该解决问题 - 改变常量定义:

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

Run Code Online (Sandbox Code Playgroud)

另请在此处查看:如何:配置服务器以使用html5Mode (向下滚动到ASP.Net C# Rewrites)查看该代码段:

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 );
}

Run Code Online (Sandbox Code Playgroud)

注意,我还建议更改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;
   }
   ...

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	606 次
最近记录：	12 年，3 月前